javascript:取消选中所有复选框

Question

我在处理取消选中所有复选框时遇到问题。当我点击切换所有复选框时，它可以选中所有复选框。但是，如果我取消选中 toggle all 复选框，则什么也不会发生。并非未选中所有复选框。下面是我用 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

更新

根据评论，现代浏览器不再需要 Array.from，因此您可以这样做

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

原始答案

在验证 isAllCheck 与您的 UI 逻辑正确之后，您可以使用简单的 vanilla-js 单行代码来完成这两项操作

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