How to select all checkboxes with jQuery?

Question

I need help with jQuery selectors. Say I have a markup as shown below:

<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

How to get all checkboxes except #select_all when user clicks on it?

here is a link to codepen with this https://codepen.io/nickhq/pen/pZJVEr — Nixon Kosgei, Jul 12 '18 at 17:32

score 115 · Accepted Answer · edited Jan 03 '20 at 10:01

A more complete example that should work in your case:

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

When the #select_all checkbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.

Note that you don't need to exclude the #select_all checkbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the #select_all, you can use this:

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

For me this only worked the first time (ie, check all, uncheck all). On the second 'check all' none of the other checkboxes were checked. I used `checkboxes.prop('checked', true);` and `checkboxes.prop('checked', false);` instead, from [this answer](http://stackoverflow.com/a/15266603/1438809). Oops, just realised this is mentioned in answers further down the page... — Felix, Aug 08 '13 at 23:14
[jQuery documentation](https://api.jquery.com/checkbox-selector/) states that `$( "[type=checkbox]" )` is faster for modern browsers (faster than `$(':checkbox')`). — Todd, Nov 25 '15 at 01:12

score 54 · Answer 2 · edited Jan 03 '20 at 10:03

54

Simple and clean:

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked', c);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>

edited Jan 03 '20 at 10:03

double-beep

5,031
17
33
41

answered Mar 26 '12 at 10:33

LOL

541
4
2

4

this may also done like this...`$(':checkbox').prop('checked', this.checked);` – earthmover Mar 04 '14 at 10:09
Subtle - set the checked status of the retrieved checkboxes equal to that of our recently modified 'master' checkbox - simple, elegant and surprisingly logical when you think about it - Thanks! – Big Rich Jul 01 '14 at 16:02

score 30 · Answer 3 · answered May 12 '13 at 09:20

30

Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:

$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});

answered May 12 '13 at 09:20

alexeydemin

2,672
3
27
26

Thanks for this, I used your implementation with JQuery 1.8.3 ;-) – Big Rich Jul 01 '14 at 15:58
1

The OP modified the answer to cope with "recent" changes :) – Erenor Paz Dec 06 '16 at 16:08

score 21 · Answer 4 · edited Oct 23 '17 at 11:29

$("form input[type='checkbox']").attr( "checked" , true );

or you can use the

:checkbox Selector

$("form input:checkbox").attr( "checked" , true );

I have rewritten your HTML and provided a click handler for the main checkbox

$(function(){
    $("#select_all").click( function() {
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>

Actually, the correct syntax is `.attr("checked", "checked")`. — Tatu Ulmanen, Feb 09 '10 at 10:46
+1 Thanks rahul, but I needed to find all checkboxes when user clicks on #select_all checkbox. — Darmen Amanbay, Feb 09 '10 at 10:48

score 3 · Answer 5 · answered Sep 02 '12 at 19:51

 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });

score 3 · Answer 6 · answered Mar 14 '13 at 08:25

3

 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });

answered Mar 14 '13 at 08:25

Beena Shetty

3,676
2
28
31

score 3 · Answer 7 · answered Oct 08 '15 at 06:33

3

jQuery(document).ready(function () {
        jQuery('.select-all').on('change', function () {
            if (jQuery(this).is(':checked')) {
                jQuery('input.class-name').each(function () {
                    this.checked = true;
                });
            } else {
                jQuery('input.class-name').each(function () {
                    this.checked = false;
                });
            }
        });
    });

answered Oct 08 '15 at 06:33

Abdo-Host

2,470
34
33

Code is great, but some explanation of why any how it helps is always welcome. – Rory McCrossan Oct 08 '15 at 06:51

score 2 · Answer 8 · edited Apr 10 '18 at 09:25

2

$("#select_all").change(function () {

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

});

edited Apr 10 '18 at 09:25

Community

1
1

answered Aug 28 '14 at 03:12

Robin Li

409
1
7
14

Thank you for this code snippet, which might provide some limited, immediate help. A [proper explanation](https://meta.stackexchange.com/q/114762/349538) would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please [edit] your answer to add some explanation, including the assumptions you’ve made. – Maximilian Peters Apr 10 '18 at 10:27

score 2 · Answer 9 · answered Nov 09 '15 at 15:03

This code works fine with me

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

you only need to add class checkbox_class to all checkbox

Easy and simple :D

score 1 · Answer 10 · answered Feb 25 '17 at 14:10

Faced with the problem, none of the above answers do not work. The reason was in jQuery Uniform plugin (work with theme metronic).I hope the answer will be useful :)

Work with jQuery Uniform

$('#select-all').change(function() {
    var $this = $(this);
    var $checkboxes = $this.closest('form')
        .find(':checkbox');

    $checkboxes.prop('checked', $this.is(':checked'))
        .not($this)
        .change();
});

score 1 · Answer 11 · answered May 17 '17 at 12:22

One checkbox to rule them all

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

Feel free to check the examples on documentation page.

For this question example all you need to do is:

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

Isn't that clear and simple?

score 0 · Answer 12 · answered Jan 14 '14 at 13:12

0

  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });

answered Jan 14 '14 at 13:12

user2821486

1

2

Add some explanation/commentary – Aleksander Lidtke Jan 14 '14 at 13:33

FlipMcF · Answer 13 · 2015-05-29T20:34:30.473

I'm now partial to this style.

I've named your form, and added an 'onClick' to your select_all box.

I've also excluded the 'select_all' checkbox from the jquery selector to keep the internet from blowing up when someone clicks it.

 function toggleSelect(formname) {
   // select the form with the name 'formname', 
   // then all the checkboxes named 'select[]'
   // then 'click' them
   $('form[name='+formname+'] :checkbox[name="select[]"]').click()
 }

 <form name="myform">
   <tr>
        <td><input type="checkbox" id="select_all"    
                   onClick="toggleSelect('myform')" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
</table>

Gareth Daine · Answer 14 · 2015-06-17T09:11:39.753

Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

Then simply call the function on your checkbox or button element:

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});

score 0 · Answer 15 · edited Sep 21 '11 at 14:41

0

$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

edited Sep 21 '11 at 14:41

antyrat

27,479
9
75
76

answered Sep 20 '11 at 22:38

How to select all checkboxes with jQuery?

15 Answers15

Linked

Related