Question

我在桌子里面有一张桌子。基本结构如下

<input type="checkbox" name="CheckAll" id="CheckAll"/> <b>Click to select all Option Values</b>
<table class="Parent">
  <tr>
     <td><input type="checkbox id="Parent">Parent1</td>
     <td><table class="Children>
        <tr><td><input type="checkbox id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox id="Child">Child2</td></tr>
        <tr><td><input type="checkbox id="Child">Child3</td></tr>
     <td>
  </tr>
  <tr>
     <td><input type="checkbox id="Parent">Parent2</td>
     <td><table class="Children>
        <tr><td><input type="checkbox id="Child">Child1</td></tr>  
        <tr><td><input type="checkbox id="Child">Child2</td></tr>
     <td>
  </tr>

当我单击CheckAll（表格上方的复选框）时，我希望选中或取消选中所有复选框。我用以下

做了

    $(document).ready(function () {
        $("#CheckAll").change(function () {
            $("input:checkbox").prop('checked', $(this).prop("checked"));
        });
    });

现在我在选择其中一个父项时尝试选择所有子项。假设我无权访问View中的父ID。如何仅访问与正在更改的复选框相邻的表？

Answer 1

你可以通过定位下一个TD，然后将其包含在表中来实现请注意，您必须将#Parent，#Child等更改为类，因为您无法复制ID。

$('.Parent[type=checkbox]').on('change', function() {
    $(this).closest('td')
           .next('td')
           .find('table input[type=checkbox]')
           .prop('checked', this.checked);
});

Answer 2

试试这个，

$(this).parent().next('td').find(':checkbox').prop('checked', this.chekced);

作为旁注，您有更多具有相同ID的元素，即Parent，这是错误的。您必须拥有唯一的ID。您可以使用课程Parent。

，而不是提供相同的ID

复选框以选择表中的所有行

2 个答案: