从选中复选框的表中获取 td 列的所有值答案

【问题标题】：Get all the values of td columns from table where checkbox is checked从选中复选框的表中获取 td 列的所有值
【发布时间】：2016-10-14 04:44:24
【问题描述】：

我有一张如下表：

有多个问题要求获取值，但在这种情况下，我应该始终有一个父项名称。假设如果用户在“衬衫”中只选择了一个子项目，那么我应该能够从所选的 tr 中获取所有值，并且我还需要父项目名称，即“衬衫”，如果有人点击了所有子项目一个父项，那么所有 tr 的所有值都需要在单击“保存”按钮时位于某种数组对象中。我正在努力做到这一点。任何帮助将非常感激。虽然我已经附加了 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>

【问题讨论】：

你的脚本怎么样？
实际上，如果父项被选中，我还必须检查所有子项，因此我正在使用使用相同类名的“checkUncheckAll”函数，如果所有子项都被选中，我必须检查父复选框也是如此，因为我在函数 CheckCorrespondingHeader 中使用了相同的名称。我已经更新了我的问题
@Sweetie 那么到底是什么问题
问题是，只有当子项被检查为真并且没有选择子项时，我才能在对象中获取父项及其子项，如果没有选择子项，则不需要获取该父项及其子项。我希望我已经让你明白了。
旁注：作为一条规则，您通常希望在 JavaScript 中使用 === 而不是 ==：stackoverflow.com/questions/523643/…

标签： javascript jquery arrays asp.net-mvc-4 html-table

【解决方案1】：

据我所知，如果您解决了一个问题，您的代码应该可以工作。您正在确定需要检查的子行数，以便使用$("[name='" + sender.name + "']").length; 检查标题行。但除非我弄错了sender.name，否则永远不会设置。当然，如果您设置它，这仍然不起作用，因为您的每个函数都将包含标题行。有几种解决方案，但我建议使用 data 属性而不是 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);
  }
}

【讨论】：