javascript: Unchecking all checkboxes

Question

I have problem dealing with unchecking all checkboxes. When I click on a toggle all checkbox, it could check all checkboxes. But if I uncheck the toggle all checkbox, nothing happens. All checkboxes are not unchecked. Below is my coding in 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>

I had even tried this coding, but still failed:

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

Below is my PHP coding for your reference:

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

Any tips on resolving this problem. Thanks in advance!

Answer 1

The problem boils down to how you're setting the checked property of the checkox. You're assigning a string with "true" where you should be assigning the boolean value true .

So to fix your code is easy:

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

or, more succinctly

cbarray[i].checked = !isAllCheck

Live example: http://jsfiddle.net/SEJZP/

Answer 2

Update

As per comments, Array.from is not necessary anymore on modern browsers, so you could do

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

Original answer

After validating that isAllCheck is correct with your UI logic, you may do both with a simple vanilla-js one-liner

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

Answer 3

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

Answer 4

You could also make it a Boolean Variable.

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

Try this

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

I have problem dealing with unchecking all checkboxes. When I click on a toggle all checkbox, it could check all checkboxes. But if I uncheck the toggle all checkbox, nothing happens. All checkboxes are not unchecked. Below is my coding in 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>

I had even tried this coding, but still failed:

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

Below is my PHP coding for your reference:

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

Any tips on resolving this problem. Thanks in advance!