循环的javascript checkall / uncheckall复选框

时间:2013-12-05 01:45:13

标签: javascript php forms checkbox

我有一个网页,可以为每个循环值显示多个复选框。我为此目的做了以下代码。它运作不佳。

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

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

谢谢!

1 个答案:

答案 0 :(得分:1)

你要做的事情很容易:这是否是一个好的方法更值得怀疑。让我们从您的问题开始:如何创建一个包含变量名称的函数(在您的情况下,您需要函数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。每当您在浏览器中进行大量操作时,它将为您节省大量时间和麻烦。

祝你好运!