CODEWITHSUNDEEP
javascriptjquerycsscheckboxcss-selectors
Darmen Amanbay
Darmen Amanbay

Reputation: 4881

How to select all checkboxes with jQuery?

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?

Upvotes: 76

Views: 192130

Answers (15)

LOL
LOL

Reputation: 551

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>

Upvotes: 55

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124768

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>

Upvotes: 115

Robin Li
Robin Li

Reputation: 409

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

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

});

Upvotes: 2

rahul
rahul

Reputation: 187050

$("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>

Upvotes: 21

nass
nass

Reputation: 347

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?

Upvotes: 1

Odin Thunder
Odin Thunder

Reputation: 3547

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();
});

Upvotes: 1

Ahmed Bermawy
Ahmed Bermawy

Reputation: 2530

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

Upvotes: 2

Abdo-Host
Abdo-Host

Reputation: 4103

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;
                });
            }
        });
    });

Upvotes: 2

Gareth Daine
Gareth Daine

Reputation: 4186

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();
});

Upvotes: 0

FlipMcF
FlipMcF

Reputation: 12877

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>

Upvotes: 0

user2821486
user2821486

Reputation: 1

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

Upvotes: 0

Alexey Demin
Alexey Demin

Reputation: 2768

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);
        }
    });
});

Upvotes: 31

Beena Shetty
Beena Shetty

Reputation: 3736

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

Upvotes: 3

Dragos Custura
Dragos Custura

Reputation: 131

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

Upvotes: 3

user955787
user955787

Reputation: 

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

Upvotes: 0

Related Questions