下面是自己亲自做的

<input type="checkbox" onclick="setCheck(this)">

function setCheck(btn){

    $(btn).parents('.bg-info').next('ul').find('input').prop('checked', btn.checked);
}

jQuery - toggle select all checkboxes

Ask QuestionAsked 11 years, 4 months agoModified 8 years, 8 months agoViewed 47k timesReport this ad25

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?

• jquery

• checkbox

ShareFollowedited Mar 12, 2012 at 17:44Dónal185k173173 gold badges568568 silver badges820820 bronze badgesasked Mar 12, 2012 at 14:30user823021241,14355 gold badges3232 silver badges5757 bronze badges

• Possible duplicate of stackoverflow.com/questions/2228382/… ? – T. Junghans Mar 12, 2012 at 14:34

• $(':input:checkbox[name="selectAll"]').prop('checked', true) Bind it to the checkboxes change event and add some conditions – Johan Mar 12, 2012 at 14:35 

Add a comment       正确答案

3 Answers

Sorted by:                                              Highest score (default)                                                                   Trending (recent votes count more)                                                                   Date modified (newest first)                                                                   Date created (oldest first)                              68

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>

 Run code snippetExpand snippet

ShareFollowedited Oct 23, 2014 at 0:54answered Mar 12, 2012 at 14:34Selvakumar Arumugam79.2k1515 gold badges120120 silver badges134134 bronze badges

• 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, 2012 at 14:39

Add a comment7

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

ShareFollowedited Jul 19, 2012 at 12:42Luke11.4k4343 gold badges6060 silver badges6969 bronze badgesanswered Mar 12, 2012 at 14:34Ray21.5k55 gold badges4848 silver badges6464 bronze badgesAdd a comment2

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

ShareFollowanswered Mar 12, 2012 at 14:34Nicola Peluchetti76.1k3131 gold badges142142 silver badges191191 bronze badgesAdd a comment

 来自   https://stackoverflow.com/questions/9669005/jquery-toggle-select-all-checkboxes/9669062#9669062