jQuery - toggle select all checkboxes

Question

Fought with a bunch of examples and, being still new to jQuery/Javascript, cannot get my code to function (here my my template in gsp):

<table>
    <thead>
    <tr>
       <th><input type="checkbox" name="selectAll" onclick="selectAll(this.checked);"/></th>
    </tr>
    </thead>
    <tbody>
         <td>
            <td><input type="checkbox" name="domainList" value="${domainInstance.id}"/></td>
    </tbody>
<table>

I have the following javascript snippet in my main gsp, that calls the template:

function selectAll(status) {

}

How do I select all checkboxes from the selectAll name?

Possible duplicate of http://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery ? — T. Junghans, Mar 12 '12 at 14:34
`$(':input:checkbox[name="selectAll"]').prop('checked', true)` Bind it to the checkboxes change event and add some conditions — Johan, Mar 12 '12 at 14:35

Selvakumar Arumugam · Accepted Answer · 2014-10-23T00:54:43.060

Since you are using jQuery, you should use an onclick handler like below for selectAll.

$(':checkbox[name=selectAll]').click (function () {
  $(':checkbox[name=domainList]').prop('checked', this.checked);
});

Please note that the above code is going to look into the entire dom for the checkbox with name=selectAll and set the status of the checkbox with name=domainList.

Below is a slightly better version with minor markup change,

jsFiddle DEMO

$('#selectAllDomainList').click(function() {
  var checkedStatus = this.checked;
  $('#domainTable tbody tr').find('td:first :checkbox').each(function() {
    $(this).prop('checked', checkedStatus);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table id="domainTable">
  <!-- Added ID -->
  <thead>
    <tr>
      <th>
        <!-- Added ID to below select box -->
        <input type="checkbox" name="selectAll" id="selectAllDomainList" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="domainList" value="${domainInstance.id}" />
      </td>
    </tr>
  </tbody>
  <table>

This method is the way to go - unobtrusive JavaScript. Ryan, if you use this method, be sure to take the onclick attribute out of your selectAll input. — Surreal Dreams, Mar 12 '12 at 14:39

score 7 · Answer 2 · edited Jul 19 '12 at 12:42

7

$("input:checkbox").prop("checked", status);

edited Jul 19 '12 at 12:42

Luke

11,426
43
60
69

answered Mar 12 '12 at 14:34

Ray

21,485
5
48
64

score 2 · Answer 3 · answered Mar 12 '12 at 14:34

2

to select all checkboxes with name = selectAll and set their status you can do

function selectAll(status) {
   $('input[name=selectAll]').each(function(){
      $(this).prop('checked', status);
   });
}

answered Mar 12 '12 at 14:34

Nicola Peluchetti

76,206
31
145
192

jQuery - toggle select all checkboxes

3 Answers3

Linked

Related