asp.net mvc jquery razor check and uncheck checkbox in a group

Question

i am trying to check and unchecked the check boxes here in a group . i want to click the corresponding parent(id=50 , id=51) then all its child check boxes should be clicked. i am trying closest and find jquery functions with some alteration but couldn't make it work. how can i achieve check and uncheck in the following scenario

<tr id="50">
<td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="parent">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> paper1</b></td>
</tr>  

<tr id="173">
 <td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub1</b></td>
</tr> 

 <tr id="174">
 <td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub2</b></td>
 </tr>

this is group 2

 <tr id="51">
<td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="parent">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> paper2</b></td>
</tr>  

<tr id="175">
 <td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub1</b></td>
</tr> 

 <tr id="173">
 <td colspan="2">
<b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child">
<input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub2</b></td>
 </tr>

Answer 1

The value of ID must be unique within the HTML document

Lets say the ID last tr is 176.

Please take a look at fiddle: https://jsfiddle.net/9qkjqLcj

 $("#50").click(function(){ if($(this).find("input[type='checkbox']").is(':checked')) $("#173,#174").find("input[type='checkbox']").prop("checked", true); else $("#173,#174").find("input[type='checkbox']").prop("checked", false); }); $("#51").click(function(){ if($(this).find("input[type='checkbox']").is(":checked")) $("#175, #176").find("input[type='checkbox']").prop("checked", true); else $("#175, #176").find("input[type='checkbox']").prop("checked", false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr id="50"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="parent"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> paper1</b></td> </tr> <tr id="173"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub1</b></td> </tr> <tr id="174"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub2</b></td> </tr> <tr id="51"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="parent"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> paper2</b></td> </tr> <tr id="175"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub1</b></td> </tr> <tr id="176"> <td colspan="2"> <b><input type="checkbox" value="true" name="MediaPlanBoxes[0].isRoGenerated" id="MediaPlanBoxes_0__isRoGenerated" class="child"> <input type="hidden" value="false" name="MediaPlanBoxes[0].isRoGenerated"> sub2</b></td> </tr> </table>