javascript:取消选中所有复选框

Question

我在处理取消选中所有复选框时遇到问题.当我点击一个切换所有复选框时,它可以检查所有复选框.但如果我取消选中切换所有复选框,则不会发生任何事情.不会取消选中所有复选框.以下是我在javascript中的编码:

<script>
var isAllCheck = false;
function togglecheckboxes(cn){

    var cbarray = document.getElementsByName(cn);
    for(var i = 0; i < cbarray.length; i++){

        if( isAllCheck == false ){
            cbarray[i].checked = "true";
            //alert( "it is false" );
        }else{ 
            cbarray[i].removeAttribute("checked");
            //alert( "it is true" );
        }
}   
isAllCheck = !isAllCheck;   
}
</script>

我甚至尝试过这种编码,但仍然失败了:

<script>
var isAllCheck = false;
function togglecheckboxes(cn){

    var cbarray = document.getElementsByName(cn);
    for(var i = 0; i < cbarray.length; i++){

        if( isAllCheck == false ){
            cbarray[i].checked = "true";
            //alert( "it is false" );
        }else{ 
            cbarray[i].checked = "false";
            //alert( "it is true" );
        }
}   
isAllCheck = !isAllCheck;   
}
</script>

以下是我的PHP编码供您参考:

echo "\t<div class='item'>
<span class='CDTitle'>{$cd['CDTitle']}</span>
<span class='CDYear'>{$cd['CDYear']}</span>
<span class='catDesc'>{$cd['catDesc']}</span>
<span class='CDPrice'>{$cd['CDPrice']}</span>
<span class='chosen'><input type='checkbox' name='cd[]' value='{$cd['CDID']}' title='{$cd['CDPrice']}' /></span>
</div>\n";

有关解决此问题的任何提示.提前致谢!

Answer 1

问题归结为你如何设置checkedcheckox 的属性.您正在为字符串分配"true",您应该在其中指定布尔值true.

因此,修复代码很简单:

if( isAllCheck == false ){
    cbarray[i].checked = true;
}else{ 
    cbarray[i].checked = false;
}

或者,更简洁

cbarray[i].checked = !isAllCheck

实例:http://jsfiddle.net/SEJZP/

Answer 2

更新

根据评论，Array.from在现代浏览器上不再需要，所以你可以这样做

document.querySelectorAll('input[type=checkbox]').forEach(el => el.checked = isAllCheck);

原答案

在验证isAllCheck您的 UI 逻辑是否正确后，您可以使用简单的 vanilla-js one-liner

Array.from(document.querySelectorAll('input[type=checkbox]')).forEach(el => el.checked = isAllCheck);