Get all the values of td columns from table where checkbox is checked

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 i.e "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>

Actually I also have to check all subitems if the parent item is checked true so for that I am using "checkUncheckAll" function which uses the same class name and if all subitems are checked, I have to check the parent checkbox also, for that I am using the same name in the function CheckCorrespondingHeader. I have updated my question — Sweetie, Jun 13 '16 at 17:13
Problem is that how can I get parent item in a object with its child items only if child are checked true and if their is no child item selected, then no need of getting that parent and its children. I hope I had made you understood. — Sweetie, Jun 13 '16 at 17:37
Side-note: as a rule you generally want to use `===` instead of `==` in JavaScript: http://stackoverflow.com/questions/523643/difference-between-and-in-javascript — olleicua, Jun 13 '16 at 17:43
Its a bit unclear what you trying to do with this html. None of your checkboxes have name attributes so they wont be submitted and even if you changed that, nothing in your view has any relationship to each other or a model so it would never bind to anything. What are you wanting to achieve with this when you submit to the controller? — , Jun 14 '16 at 06:30

score 0 · Answer 1 · answered Jun 13 '16 at 17:42

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

Get all the values of td columns from table where checkbox is checked

1 Answers1