Question

我尝试选择一行(tr)内的所有复选框。因此，我使用One查询代码来执行此操作。但它检查了2行的复选框。

但它应该选择这样：

如果我选择MON，则选择此下面的全部复选框。如果我选择TUE，则应选择此下的所有复选框，但现在选择全部。

  <tr>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" id="checkAll"/>&nbsp;<strong>MON</strong></td>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" class="checkItem"/>&nbsp; Morning</td>
    <td><input type="checkbox" name="mon_afternoon" value="mon_morning" class="checkItem"/>&nbsp; Afternoon</td>
    <td><input type="checkbox" name="mon_evening" value="mon_evening" class="checkItem"/>&nbsp; Evening</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="mon_morning" value="mon_morning" id="checkAll_1"/>&nbsp;<strong>TUE</strong></td>
    <td><input type="checkbox" name="tue_morning" value="tue_morning" class="checkItem_1"/>&nbsp; Morning</td>
    <td><input type="checkbox" name="tue_afternoon" value="tue_morning" class="checkItem_1"/>&nbsp; Afternoon</td>
    <td><input type="checkbox" name="tue_evening" value="tue_evening" class="checkItem_1"/>&nbsp; Evening</td>
  </tr>

<script>
$('#checkAll, #checkAll_1').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
    $(':checkbox.checkItem_1').prop('checked', this.checked);    
 });
</script>

对不起，我的英文不好:(

Answer 1

我的第一个想法是：

$('td:first-child input[type="checkbox"]').on('change', function(){
    $(this)
    .closest('td')
    .siblings()
    .find('input[type="checkbox"]').prop('checked', this.checked);
});

JS Fiddle demo

修改，考虑<input>元素的类名（我最初错过）：

$('td:first-child input[type="checkbox"]').on('change', function(){
    $(this)
    .closest('tr')
    .find('.checkItem').prop('checked', this.checked);
});

JS Fiddle demo

如果选中/取消选中<input>中的其他<tr>元素，则更新为自动全面检查/取消选中：

$('tr input[type="checkbox"]').on('change', function () {
    var cell = $(this).closest('td'),
        row = cell.parent(),
        checkItems = row.find('.checkItem');
    if (cell.is(':first-child')) {
        checkItems.prop('checked', this.checked);
    } else {
        row.find('td:first-child input')
            .prop('checked', checkItems.length === checkItems.filter(':checked').length);
    }
});

JS Fiddle demo

参考文献：

Answer 2

试试这个：

$('#checkAll, #checkAll_1').click(function () {
    $(this).closest('tr').find('input[type=checkbox]').prop('checked', this.checked);
});

Answer 3

将属性添加到＆＃39; Day＆＃34;复选框并使用它来选择适当的日期部分：

<tr>
  <td><input type="checkbox" name="mon_morning" grp="checkItem" value="mon_morning" id="checkAll"/>&nbsp;<strong>MON</strong></td>
  <td><input type="checkbox" name="mon_morning" value="mon_morning" class="checkItem"/>&nbsp; Morning</td>
  <td><input type="checkbox" name="mon_afternoon" value="mon_morning" class="checkItem"/>&nbsp; Afternoon</td>
  <td><input type="checkbox" name="mon_evening" value="mon_evening" class="checkItem"/>&nbsp; Evening</td>
</tr>
<tr>
  <td><input type="checkbox" name="tue_morning" grp="checkItem_1" value="tue_morning" id="checkAll_1"/>&nbsp;<strong>TUE</strong></td>
  <td><input type="checkbox" name="tue_morning" value="tue_morning" class="checkItem_1"/>&nbsp; Morning</td>
  <td><input type="checkbox" name="tue_afternoon" value="tue_morning" class="checkItem_1"/>&nbsp; Afternoon</td>
  <td><input type="checkbox" name="tue_evening" value="tue_evening" class="checkItem_1"/>&nbsp; Evening</td>
</tr>

使用该属性选择日期部分：

$('#checkAll, #checkAll_1').click(function () {   
  $('.' + $(this).attr("grp")).prop('checked', this.checked);    
});

请参阅fiddle sample

Answer 4

我建议像checkAll一样使用类：

<强> HTML

<input type="checkbox" name="mon_morning" value="mon_morning" class="checkAll"/>

并在 js

中

$(".checkAll").on("click",
                  function(){
                      if($(this).prop("checked"))
                          $(this).parent().nextAll("td").find("input:checkbox").prop("checked",true)
                      else
                          $(this).parent().nextAll("td").find("input:checkbox").prop("checked",false)                              
                  });

fiddle

Jquery单击一个复选框应该选择一行中的所有复选框

4 个答案: