javascript checkall/uncheckall checkbox for loop

Question

I have a webpage to display multiple checkboxes for each loop values. I did the below code for that purpose. It is not working well.

<?
$idArray=array();
foreach($this->login as $login):
$idArray[]=$login['id'];
endforeach;
$count=count($idArray);
?>

JavaScript Function

<script type="text/javascript" language="javascript">
    var jArray = <?= json_encode($idArray); ?> ;
    var l = <?= $count; ?> ;
    for (var i = 0; i < l; i++) {
        var value = jArray[i];
        function 'setCheckboxes' + value(act) {
            var e = document.getElementsByClassName('names' + value);
            var elts_cnt = (typeof(e.length) != 'undefined') ? e.length : 0;
            if (!elts_cnt) {
                return;
            }
            for (var i = 0; i < elts_cnt; i++) {
                e[i].checked = (act == 1 || act == 0) ? act : (e[i].checked ? 0 : 1);
            }
        }
    }
</script>

Form

<?
foreach($this->login as $login):
?>
<form action="/site/select-tags" method="post" name="myform">
<table class="list">
<thead>
<tr>
<th>Username: <?=$login['username'];?>   </th>
<th>Password: <?=$login['decryptPassword'];?></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="javascript:setCheckboxes<?=$login['id'];?>(1);">Check All</a> |
<a href="javascript:setCheckboxes<?=$login['id'];?>(0);">Uncheck All</a>
</td>
</tr>
<tr >

<?
$count = 0;
foreach($this->alltags as $all):
$count++;
?>

<td style="background-color:#F0F0F0;">
<input type="checkbox" name="comp[]" value="<?=$all['id'];?>" class="names<?=$login['id'];?>">
<label for="<?=$all['tag'];?>"><?=$all['tag'];?></label>
</td>
<?php
if($count % 2 == 0 || $count ==count($this->alltags)):
?>
</tr>
<?php if($count != count($this->alltags)) : ?>
<tr>
<?php endif; ?>
<?php endif; ?>
<?endforeach; ?>
<tr></tr>
<tr>
<td><input type="submit" value="Add" style="background:#016ABC;color: #fff;border: 1px solid #eee;border-radius: 20px;box-shadow: 5px 5px 5px #eee;"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<?
endforeach;
?>

I have added the function name as function 'setCheckboxes'+value(act) . But it is not the correct syntax I know. How can I use the variable name in javascript function. Or is there any better way to select checkboxes in the specified table?

Thanks!

Ethan Brown · Accepted Answer · 2013-12-05 02:01:59Z

What you're looking to do is very easy: whether it's a good way to go is more questionable. Let's start with the meat of your question: how to create a function that incorporates a variable name (in your case, you want functions setCheckboxes1, setCheckboxes2, etc.).

In JavaScript, functions are first-class citizens, so you don't even really need to do this, but let's assume for a moment that you do. When you declare a function in JavaScript, you aren't really declaring a function so much as you are a method on the global object. In a browser, that global object is simply called window. So, if you wanted to create all of your functions, you would simply need the following:

for(var i=0;i<l;i++) {
    var value=jArray[i];
    window['setCheckboxes'+value(act)] = function() {
        //...
    }
}

As an aside, I don't think that value(act) is going to give you what you're looking for. You're invoking value as if it was a function, and JSON encoding an array is not going to return any functions. I suspect what you are looking for is value.act (assuming act is a property of each element in the array).

Then you can just call each of the functions as normal.

Allow me to give you a little advice, though: your JavaScript strikes me as very overcomplicated. JavaScript is a powerful and expressive language, and even though I haven't spent a lot of time grokking exactly what you're trying to do, everything about your code just screams "too much effort". I think what you're doing is going to be brittle, buggy, and hard to fix.

Since you're using PHP, you probably think more procedurally, which is okay. But keep in mind that JavaScript is a function-based, dynamic language. You can pass around functions, arrays and objects as easy as breathing. Also, whenever you're using a back-end language (like PHP) combined with a front-end language (like JavaScript), you're always faced with the decision of how much work to do on the back end, and how much work to do on the front end. I would encourage you to do as much as possible on the front-end, with minimal processing in PHP. You'll find that JavaScript is more than up to the task.

Also, I would encourage you to look into using jQuery if you can. Whenever you're doing a lot of manipulation in the browser, it will save you inordinate amounts of time and trouble.

Good luck with your problem!

Collectives™ on Stack Overflow

javascript checkall/uncheckall checkbox for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related