Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check/Uncheck all checkboxes

I've seen many check/uncheck all checkboxes scripts. But far most does not respect that if I toggled all checkboxes using the "checked all"-checkbox and then uncheck a single one in the list, the "checked all" checkbox is still checked.

Is there an elegant way of handling this case?

like image 668
janhartmann Avatar asked Jan 26 '11 13:01

janhartmann


People also ask

How do I uncheck the select all checkbox?

Clicking on the master checkbox selects all checkboxes; and unchecking it, deselects all checkboxes.

How do you check and uncheck all checkbox in React?

To uncheck a checkbox programmatically in React, we can set the checked prop of the checkbox to a state. We have the checked state that we used to set the checked prop of the checkbox. Then we add a button that calls setChecked to toggle the checked value when we click the button.

How do I untick all checkboxes in Excel?

To delete all checkboxes at a time, go to the Home tab > Editing group > Find & Select > Go To Special, select the Objects radio button, and click OK. This will select all the check boxes on the active sheet, and you simply press the Delete key to remove them.


2 Answers

$('#checkAll').click(function() {
    if(this.checked) {
        $('input:checkbox').attr('checked', true);
    }
    else {
        $('input:checkbox').removeAttr('checked');
    }
});

$('input:checkbox:not(#checkAll)').click(function() {
    if(!this.checked) {
        $('#checkAll').removeAttr('checked');
    }
    else {
        var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
        var numTotal = $('input:checkbox:not(#checkAll)').length;
        if(numTotal == numChecked) {
            $('#checkAll').attr('checked', true);
        }
    }
});

Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/

As pointed out in the question's comment, a regular checkbox is not perfect for this. My implementation disables the "check all" box as soon as one checkbox is unchecked. So, to uncheck all still-checked checkboxes you'll have to click twice (first to re-check the unchecked ones and then to uncheck all other ones). However, with a tri-state checkbox this might still be necessary as the state order might be unchecked->indefinite->checked->unchecked, so you'd need two clicks to come from indefinite to unchecked.


Since you probably don't want to check ALL checkboxes on your page with "Check All", replace input:checkbox with e.g. .autoCheckBox or input.autoCheckBox:checkbox and give those checkboxes class="autoCheckBox".

If you want all checkboxes inside a certain form, simple use #idOfYourForm input:checkbox or form[name=nameOfYourForm] input:checkbox

like image 176
ThiefMaster Avatar answered Sep 23 '22 14:09

ThiefMaster


You can achieve this by attaching a click handler to each of the target checkboxes, and have that handler un-check the "control" checkbox based on the collective state of those target checkboxes. So, something like this:

// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
  $('.targetcheckboxes').attr('checked', this.checked );
});

// Targets affect control
$('.targetcheckboxes').click( function(){
  if( $('.targetcheckboxes:not(:checked)').length ){
    $('#controlcheckbox').attr('checked',false);
  }
});

Even better -- you could attach this logic to an enclosing container element, and watch for the event using .delegate():

$('#some_container').delegate('.targetcheckboxes','click',function(){...} );
like image 33
Ken Redler Avatar answered Sep 23 '22 14:09

Ken Redler