循环的javascript checkall/uncheckall复选框


javascript checkall/uncheckall checkbox for loop

我有一个网页,可以为每个循环值显示多个复选框。为此,我编写了以下代码。它不太好用。

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

JavaScript函数

<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>

表单

<?
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;
?>

我已将函数名称添加为函数"setCheckboxes"+值(act)。但这不是我所知道的正确语法。如何在javascript函数中使用变量名。或者有更好的方法来选择指定表中的复选框吗?

谢谢!

您想要做的事情非常简单:这是否是一个好的方法更值得怀疑。让我们从你的问题开始:如何创建一个包含变量名的函数(在你的情况下,你想要函数setCheckboxes1setCheckboxes2等)

在JavaScript中,函数是一流的公民,所以你甚至不需要这样做,但让我们假设你这样做。当你在JavaScript中声明函数时,你并没有真正声明函数,而是声明全局对象上的方法。在浏览器中,该全局对象简称为window。因此,如果你想创建所有的功能,你只需要以下内容:

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

顺便说一句,我不认为value(act)会给你想要的东西。调用value就像调用一个函数一样,对数组进行JSON编码不会返回任何函数。我怀疑您要查找的是value.act(假设act是数组中每个元素的属性)。

然后,您可以正常调用每个函数。

不过,请允许我给你一点建议:你的JavaScript让我觉得过于复杂了。JavaScript是一种强大且富有表现力的语言,尽管我没有花太多时间仔细研究你想做什么,但你的代码中的一切都让人觉得"太费力了"。我认为你所做的将是脆弱的,有缺陷的,并且很难修复。

由于您使用的是PHP,所以您可能会更加程序化地思考,这是可以的。但请记住,JavaScript是一种基于函数的动态语言。您可以像呼吸一样轻松地传递函数、数组和对象。此外,每当您使用后端语言(如PHP)与前端语言(如JavaScript)相结合时,您总是要决定在后端做多少工作,在前端做多少工作。我鼓励您在前端尽可能多地使用PHP进行处理。您会发现JavaScript远远不能胜任这项任务。

此外,如果可以的话,我鼓励您考虑使用jQuery。每当你在浏览器中进行大量操作时,它都会为你节省大量的时间和麻烦。

祝你的问题好运!