如何使用jquery在div状态内切换复选框?

时间:2010-12-07 01:29:13

标签: javascript jquery javascript-events

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

当用户点击复选框全选时,我想检查/取消选中div = 1内的所有复选框

2 个答案:

答案 0 :(得分:0)

需要引用您的ID,即:

onclick="jqCheckAll3(ContentPlaceHolder1_rptFleet_chkFleetName_0,1 );

需要:

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

还有其他问题,例如id="1"在HTML4中无效,但缺少引用错误的引号是您当前的问题。


总体而言,更简单的方法是通过CssClassclass="checkAll"提供该复选框,然后您就可以执行此操作:

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

然后这一组代码适用于页面中的所有这些情况(假设标记/布局相同)。

答案 1 :(得分:0)

我会把它们放在一起有点不同。如果我了解您的问题,您要检查所有复选框,或者根据单个复选框取消选中所有复选框(全部选中)。

首先,正如Nick指出的那样,你不应该使用“1”作为div的ID。并且您也可以使用单个选择语句来获取所有像这样的特定div的子复选框...

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

这将选择div by id,然后选择任何复选框的输入。我得到“全选”复选框的选中值(在onclick事件中调用)并使用该值设置复选框的值。

我还会将事件的连接移动到document.ready事件而不是在标记中执行函数调用,但这只是更多的偏好。

以下链接指向jsfiddle

中的所有内容

希望这有帮助...