如何使用jQuery在div状态内切换复选框？

Question

<table>
 <tbody>
    <tr>
     <td>
       <span>A_Group</span>
        <input type="hidden" value="1" id="ContentPlaceHolder1_rptFleet_hiddenFleetID_0" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$hiddenFleetID">
     </td>
     <td>
       <span name="chkGroupName">
        <input type="checkbox" onclick="jqCheckAll3(ContentPlaceHolder1_rptFleet_chkFleetName_0,1 );" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkFleetName" id="ContentPlaceHolder1_rptFleet_chkFleetName_0">
        <label for="ContentPlaceHolder1_rptFleet_chkFleetName_0">Select All</label>
       </span>
    </td>
   </tr>
   <tr>
    <td>
      <div id="1"><table cellspacing="5" cellpadding="5" id="ContentPlaceHolder1_rptFleet_chkListDevice_0">
         <tbody>
           <tr>
               <td>
                   <input type="checkbox" value="1" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$0" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_0_0">
                   <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_0_0">name 2</label>
               </td>
               <td>
                  <input type="checkbox" value="2" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$1" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_1_0">
                  <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_1_0">name 4</label>
               </td>
               <td>
                   <input type="checkbox" value="3" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$2" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_2_0">
                   <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_2_0">name 4</label>
               </td>
             </tr>
         </tbody>
        </table>
       </div>
      </td>
     </tr>
    </tbody>
</table>


function jqCheckAll3(id, pID) {
$("#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked'));
}

I would like to check/uncheck all checkboxes inside div=1 when user clicked on checkbox select all

Answer 1

Your IDs need to be quoted, this:

onclick="jqCheckAll3(ContentPlaceHolder1_rptFleet_chkFleetName_0,1 );

needs to be:

onclick="jqCheckAll3('ContentPlaceHolder1_rptFleet_chkFleetName_0', '1');

There are other issues, like id="1" isn't valid in HTML4, but the lack of quotes throwing a script error is your current issue.

---

A simpler way overall would be giving that checkbox a class instead via CssClass , like class="checkAll" , then you could do this:

<script type="text/javascript">
$(function() {
  $("input.checkAll").change(function() {
    $(this).closest("tr").next().find(":checkbox").attr("checked", this.checked);
  });
});
</script>

Then this one set of code works for all these situations in the page (assuming the markup/layout is the same).

Answer 2

I would put this together a little differently. If I understand your problem you are trying to either check all checkboxes or uncheck all checkboxes based on a single checkbox (the select all one).

First things first, as Nick pointed out, you shouldn't be using "1" as your ID for the div. and also you can use a single selection statement to get all the checkboxes that are a child of any specific div like this...

//notice I changed the name of the div to myDiv
var isChecked = $(this).attr('checked');
$('#myDiv input:checkbox').attr('checked', isChecked);

This selects the div by id, then any inputs that are checkboxes. I get the checked value of the "select all" check box (this is called on the onclick event) and use that value to set the values of the checkboxes.

I would also move the wiring of the event to the document.ready event instead of doing the function call in the markup, but that is just more preference.

Here is a link to everything working in a jsfiddle

Hope this help...