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

Question

I have a table as below:

..

There have been multiple questions asked for getting the values but in this case I should always have a parent item name. Suppose If a user selected only one subitem in "Shirts", then I should be able to get all the values from the selected tr and with that I need parent item name also ie "shirts" and if some one clicks on all the subitems of a parent item, then all the values of all tr are need to be in some sort of array object on click of a "Save" button. I am trying hard to do this. Any help would be really appreciated. Though I have attached the HTML but this HTML is being generated at run time.

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 code looks like below:

<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

As far as I can tell your code should work if you fix one issue. You are determining the number of sub rows that need to be checked to make the header row be checked using $("[name='" + sender.name + "']").length; . But unless I'm mistaken sender.name is never set. Of course if you set it this still won't work because your each function will include the header row. There are several solutions to this but I would recommend using a data attribute instead of the name attribute like so:

Markup:

<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>

Script:

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);
  }
}