Implement jQuery to check the checkboxes from table within a table.

Question

Allright guys, I am new to this field so deal with it please. I have been given a table which is already populated with values along with the check-boxes with each of them. Table is structured in three layers i.e 1) Select all info in which : 2) there are four categories in which 3) random data is populated.

Now if I try to select all the check boxes in Select all info checkbox, it works fine. But how could i select the specific table data under the second layer. Below is the code where I wrote some code in script tag. It shows in the snippet that I work fine but as soon as the data get populated inside tables, it doesn't work at layer 2. Any suggestion would be really helpful. Thanks.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
    $(function(){
         $("#Select_All").click(function () {
         $('.Parent_Selection').attr('checked', this.checked);
         $('.Child_Selection').attr('checked', this.checked);
    
          });});

    $(function() {   
        $("#Parent_ID").click(function(){ 
     $(".Child_Selection").attr('checked', this.checked);
     
        });});
    </script>

<div>
    <input type="checkbox" id = "Select_All" name="Main"  />Select All Information
    <table width="100%" border="1" >
    <tbody>
    <core:forEach var="mdata" items="${metaData.metaData}" varStatus="toprowCount">
    <core:if test="${toprowCount.index % 2 == 0 }"><tr></core:if>
    <td >
    <table width="100%" border="1" >
    <tr>
    <th >
    <div  class="sidebar-left sidebar-header sidebar-title"> 
    <input type="checkbox" id = "Parent_ID" name="Parent" class = "Parent_Selection" />${mdata.key}
    </div>
    </th>
    </tr>
    </tbody>
    </table>
 <table width="100%" border="1">
    <tbody>
    <core:forEach var="m" items="${mdata.value}" varStatus="rowCount"  >
    <core:if test="${rowCount.index % 3 == 0 }"><tr></core:if>
    <td>
    <input type="checkbox" id = "Child_ID"  name="Child" class="Child_Selection"/>${m} 
    </td>
    <core:if test="${rowCount.count % 3 == 0}"></tr></core:if>
    </core:forEach>
    </tbody>
    </table>
    </td>
    <core:if test="${toprowCount.count % 2 == 0}"></tr></core:if>
    </core:forEach>
    </td>
    </tr>
    </table>
</div>

score 0 · Answer 1 · answered Aug 18 '15 at 11:05

0

You can use it this way:

$(function(){
    $("#Select_All").change(function () {
        $('.Parent_Selection, .Child_Selection').prop('checked', this.checked);
    });
    $(".Parent_Selection").change(function(){ 
        $(".Child_Selection", this).prop('checked', this.checked);
    });
});

Also you should consider using different ids for each element as you have a loop to generate the elements, so that each loop causes same ids to be applied.

answered Aug 18 '15 at 11:05

Jai

74,255
12
74
103

No effects ... the problem i think is that there are _too many tables inside the table_ and there is no **parameter/variable** common in between Parent and Child with which one can know which parent belongs to which child. The best i got was when selecting a parent marks all the child belonging from the other parents as well. – Umair Aug 18 '15 at 11:28

Implement jQuery to check the checkboxes from table within a table.

1 Answers1