Question

我动态创建了以下table（所以请不要注意值和表格结构）

         <table id="tbl">
            <tr>
                <th>
                    <input type="checkbox" name="1" value="1" />
                </th>
                <th>
                    Finance
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="1" value="1" />
                </td>
                <td>
                    section1
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="21" value="21" />
                </td>
                <td>
                    section2
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="16" value="16" />
                </td>
                <td>
                    section3
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="17" value="17" />
                </td>
                <td>
                    section4
                </td>
            </tr>
            <tr>
                <th id="th">
                    <input type="checkbox" name="12" value="12" />
                </th>
                <th>
                    Information Tech
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="3" value="3" />
                </td>
                <td>
                    section1
                </td>
            </tr>
          </table>

当选中/取消选中th内的复选框时，我需要选中/取消选择以下td中的所有复选框，直到达到下一个th。我尝试了以下代码。

$('#tbl tr th').find('input[type="checkbox"]').click(function () {
    var isChecked = $(this).prop("checked");

    $(this).nextuntil('#tbl tr th').each(function () {

        $('#tbl tr td').find('input[type="checkbox"]').prop('checked', isChecked);
    });
});

它不起作用。

Answer 1

考虑在你的桌子中使用更好的结构。

<table>
  <tbody>
    <tr><th>checkbox</th><th>heading 1</th></tr>
    <tr>...rows/cells...</tr>
  </tbody>
  <tbody>
    <tr><th>checkbox</th><th>heading 2</th></tr>
    <tr>...rows/cells...</tr>
  </tbody>
</table>

请注意，您可以拥有任意数量的tbody元素。

一旦建立了这种结构，您只需使用.closest("tbody").find("td input[type=checkbox]")和......完成工作！

Answer 2

您可以添加组类或属性以使其更容易。

$(function() {
  //On init: Adding group attribute 
  var cbClassCount = 0;
  $("#tbl input[type='checkbox']").each(function() {
    if ($(this).parent().prop("tagName") === "TH") {
      cbClassCount++;
      $(this).attr("group", cbClassCount);
    } else {
      $(this).attr("group-parent", cbClassCount);
    }
  });


  //On TH checkbox click - Check or uncheck child checkboxes
  $("#tbl th>input[type='checkbox']").click(function() {
    $("input[group-parent='" + $(this).attr("group") + "']").prop('checked', $(this).prop("checked"));
  });


  //SUGGESTION: You can also add the code below (optional)
  //On TD checkbox click - Updated the parent checkbox if all of the child checkboxes are checked.
  $("#tbl td>input[type='checkbox']").click(function() {
    if ($("input[group-parent='" + $(this).attr("group-parent") + "']").length === $("input[group-parent='" + $(this).attr("group-parent") + "']:checked").length)
      $("input[group='" + $(this).attr("group-parent") + "']").prop('checked', true);
    else $("input[group='" + $(this).attr("group-parent") + "']").prop('checked', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <th>
      <input type="checkbox" name="1" value="1" />
    </th>
    <th>
      Finance
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="1" value="1" />
    </td>
    <td>
      section1
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="21" value="21" />
    </td>
    <td>
      section2
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="16" value="16" />
    </td>
    <td>
      section3
    </td>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="17" value="17" />
    </td>
    <td>
      section4
    </td>
  </tr>
  <tr>
    <th id="th">
      <input type="checkbox" name="12" value="12" />
    </th>
    <th>
      Information Tech
    </th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="3" value="3" />
    </td>
    <td>
      section1
    </td>
  </tr>
</table>

Answer 3

你必须循环遍历这些行并继续检查下一行是否有第一个子TD，如下：

＆＃13;

(function($){
    $("#tbl").find('th>input[type="checkbox"]').click(function(){
        var $this = $(this),
            isChecked = $this.prop("checked"),
            row = $this.closest("tr").next();

        while (row.length && row.children(":first").prop("tagName").toUpperCase() == "TD") {
            var checkbox = row.find('td>input[type="checkbox"]');
            checkbox.prop("checked", isChecked);
            row = row.next();
        }
    })
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl">
    <tr>
        <th>
            <input type="checkbox" name="1" value="1" />
        </th>
        <th>
            Finance
        </th>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="1" value="1" />
        </td>
        <td>
            section1
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="21" value="21" />
        </td>
        <td>
            section2
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="16" value="16" />
        </td>
        <td>
            section3
        </td>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="17" value="17" />
        </td>
        <td>
            section4
        </td>
    </tr>
    <tr>
        <th id="th">
            <input type="checkbox" name="12" value="12" />
        </th>
        <th>
            Information Tech
        </th>
    </tr>
    <tr>
        <td class="text-center">
            <input type="checkbox" name="3" value="3" />
        </td>
        <td>
            section1
        </td>
    </tr>
</table>

＆＃13;

Answer 4

我对你的jQuery代码进行了一些更改，但我没有触及html。

＆＃13;

$('#tbl tr th input[type="checkbox"]').click(function () {
    var isChecked = $(this).prop("checked");
    var pElem = $(this).parent().parent();
    var nStopElem = pElem.nextAll().each((indx, elem)=>{
        if ($(elem).find("th").length == 0) {
            $(elem).find("input[type='checkbox']").prop('checked', isChecked);
        }
        else
        {
            return false;
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl">
            <tr>
                <th>
                    <input type="checkbox" name="1" value="1" />
                </th>
                <th>
                    Finance
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="1" value="1" />
                </td>
                <td>
                    section1
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="21" value="21" />
                </td>
                <td>
                    section2
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="16" value="16" />
                </td>
                <td>
                    section3
                </td>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="17" value="17" />
                </td>
                <td>
                    section4
                </td>
            </tr>
            <tr>
                <th id="th">
                    <input type="checkbox" name="12" value="12" />
                </th>
                <th>
                    Information Tech
                </th>
            </tr>
            <tr>
                <td class="text-center">
                    <input type="checkbox" name="3" value="3" />
                </td>
                <td>
                    section1
                </td>
            </tr>
          </table>

＆＃13;

jquery在表格中选择输入框＆＃39; td＆＃39;直到下一个＆＃39;

4 个答案: