Question

我有一张表格如下：

..

有多个问题要求获取值，但在这种情况下，我应该总是有一个父项名称。假设如果用户在＆＃34;衬衫＆＃34;中只选择了一个子项目，那么我应该能够从所选择的tr中获取所有值，并且我需要父项目名称，即＆＃34;衬衫＆＃34;如果有人点击了父项的所有子项，那么所有tr的所有值都需要在某种数组对象中点击＆＃34; Save＆＃34;按钮。我正在努力做到这一点。任何帮助将非常感激。虽然我已经附加了HTML，但是这个HTML是在运行时生成的。

HTML：

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Name</td>
        <td>Sub Item</td>
        <td>User Input</td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" id="chkGroup1" class="cls1" onclick="checkUncheckAll(this);" />
        </td>
        <td>Shirts
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item1</td>
        <td>SubItem1</td>
        <td>
            <input id="1datepicker" name="1datepicker" type="text" /><script>

            </script></td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item2</td>
        <td>SubItem2</td>
        <td>
            <input id="2datepicker" name="2datepicker" type="text" /><script>

            </script></td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item3</td>
        <td>SubItem3</td>
        <td>
            <input id="3datepicker" name="3datepicker" type="text" /><script>

            </script></td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" id="chkGroup2" class="cls2" onclick="checkUncheckAll(this);" />
        </td>
        <td>Jeans
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item4</td>
        <td>SubItem4</td>
        <td>
            <input id="4datepicker" name="4datepicker" type="text" /><script>

            </script></td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item5</td>
        <td>SubItem5</td>
        <td>
            <input id="5datepicker" name="5datepicker" type="text" /><script>

            </script></td>

    </tr>
    <tr>
        <td>
            <input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
        <td>&nbsp;</td>
        <td>Item6</td>
        <td>SubItem6</td>
        <td>
            <input id="6datepicker" name="6datepicker" type="text" /><script>

            </script></td>

    </tr>
</table>

脚本代码如下所示：

<script>
    function checkUncheckAll(sender) {
        var chkElements = document.getElementsByClassName(sender.className);
        for (var i = 0; i < chkElements.length; i++) {
            chkElements[i].checked = sender.checked;
        }
    }

    function CheckCorrespondingHeader(sender) {
        ControlLength = $("[name='" + sender.name + "']").length;
        var countchecks = 0;
        $("[name='" + sender.name + "']").each(function () {
            if ($(this).prop('checked') == true) {
                countchecks = countchecks + 1;
            }
        });
        if (ControlLength == countchecks) {
            $("#chk" + sender.name).attr('checked', 'checked');
        }
        else {
            $("#chk" + sender.name).prop('checked', false);
        }
    }

    function PickAllCheckedRows() {

    }
</script>

Answer 1

据我所知，如果你解决了一个问题，你的代码应该可行。您正在确定需要检查的子行数，以使用$("[name='" + sender.name + "']").length;检查标题行。但除非我弄错了，sender.name永远不会被设定。当然，如果你设置它仍然不起作用，因为你的每个函数将包括标题行。有几个解决方案但我建议使用数据属性而不是name属性，如下所示：

标记：

<table>
  <tr>
    <!-- head -->
    <td><input type="checkbox" data-head-for-group="Group1" ... /></td>
  </tr>
  <tr>
    <!-- row 1 -->
    <td><input type="checkbox" data-in-group="Group1" ... /></td>
  </tr>
  <tr>
    <!-- row 2 -->
    <td><input type="checkbox" data-in-group="Group1" ... /></td>
  </tr>
  <tr>
    <!-- head -->
    <td><input type="checkbox" data-head-for-group="Group2" ... /></td>
  </tr>
  <tr>
    <!-- row 3 -->
    <td><input type="checkbox" data-in-group="Group2" ... /></td>
  </tr>
</table>

脚本：

function CheckCorrespondingHeader(sender) {
  var group = $("[data-in-group='" + sender.data('headForGroup') + "']");
  var groupSize = group.length;
  var countchecks = 0;
  group.each(function () {
    if ($(this).prop('checked') === true) {
       countchecks = countchecks + 1;
    }
  });
  if (groupSize === countchecks) {
    $(sender).attr('checked', 'checked');
  } else {
    $(sender).prop('checked', false);
  }
}

从表中选中复选框的td列的所有值

1 个答案: