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

问题归结为你如何设置checkox的checked属性。您正在为字符串分配“true”，您应该在其中指定布尔值true。

因此，修复代码非常简单：

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

或者，更简洁

cbarray[i].checked = !isAllCheck

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

Answer 2

您也可以将其设为布尔变量。

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

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

    if(isAllCheck){ //and then you could make this shorter.
        cbarray[i].checked = true;
        //alert( "it is false" );
    }else{ 
        cbarray[i].removeAttribute("checked");
        //alert( "it is true" );
    }
}   
isAllCheck = !isAllCheck;   
}
</script>

Answer 3

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

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

Answer 4

试试这个

    <script>
var isAllCheck = false;
function togglecheckboxes(master,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>

Answer 5

你可以使用jQuery做到这一点非常简单易懂：）

$('#mybutton').click(function(e) {
    $('.myCheckboxes').each(function(i,item){
        $(item).attr('checked', !$(item).is(':checked'));
    });
});

Try on jsFiddle

Answer 6

function uncheckElements()
{
 var uncheck=document.getElementsByTagName('input');
 for(var i=0;i<uncheck.length;i++)
 {
  if(uncheck[i].type=='checkbox')
  {
   uncheck[i].checked=false;
  }
 }
}

javascript：取消选中所有复选框

6 个答案: