Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <pre><code>$('#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); } } }); </code></pre> <p>Demo: <a href="http://jsfiddle.net/ThiefMaster/HuM4Q/" rel="noreferrer">http://jsfiddle.net/ThiefMaster/HuM4Q/</a></p> <p>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 <em>one</em> 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.</p> <hr> <p>Since you probably don't want to check ALL checkboxes on your page with "Check All", replace <code>input:checkbox</code> with e.g. <code>.autoCheckBox</code> or <code>input.autoCheckBox:checkbox</code> and give those checkboxes <code>class="autoCheckBox"</code>.</p> <p>If you want all checkboxes inside a certain form, simple use <code>#idOfYourForm input:checkbox</code> or <code>form[name=nameOfYourForm] input:checkbox</code></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload