How to implement a tree with checkboxes? working example

<table> <tbody> <tr> <th class="left-th"><span class="arrow"></span><input class="groupswitchchb" type="checkbox"></th> <th class="right-th"><span class="dashed-span">1.ะขะตะบัั‚</span></th> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][1][0]" type="checkbox"></td> <td>1.1. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][2][0]" type="checkbox"></td> <td>1.2.ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][3][0]" type="checkbox"></td> <td>1.3.ะŸะพะดั‚ะตะบัั‚</td> </tr> </tbody> <tbody> <tr> <th class="left-th"><span class="arrow"></span><input class="groupswitchchb" type="checkbox"></th> <th class="right-th"><span class="dashed-span">4. ะขะตะบัั‚</span></th> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][1][0]" type="checkbox"></td> <td>4.1. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][2][0]" type="checkbox"></td> <td>4.2. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][3][0]" value="dng" type="checkbox"></td> <td>4.3. ะŸะพะดั‚ะตะบัั‚</td> </tr> </tbody> </table>

    1 answer 1

     <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <style type="text/css"> .dashed-span{cursor:pointer} .left-th{width:90px;text-align:center} .right-th{text-align:left} .check{width:90px;text-align:right;padding-left:0} .arrow{display:inline-block;height:18px;width:18px;background:url(http://www.reestr-sro.ru/images/arrow_right_gray.png) 50% 50% no-repeat;cursor:pointer} </style> </head> <body> <table> <tbody> <tr> <th class="left-th"><span class="arrow"></span><input class="groupswitchchb" type="checkbox"></th> <th class="right-th"><span class="dashed-span">1.ะขะตะบัั‚</span></th> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][1][0]" type="checkbox"></td> <td>1.1. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][2][0]" type="checkbox"></td> <td>1.2.ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[1][3][0]" type="checkbox"></td> <td>1.3.ะŸะพะดั‚ะตะบัั‚</td> </tr> </tbody> <tbody> <tr> <th class="left-th"><span class="arrow"></span><input class="groupswitchchb" type="checkbox"></th> <th class="right-th"><span class="dashed-span">4. ะขะตะบัั‚</span></th> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][1][0]" type="checkbox"></td> <td>4.1. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][2][0]" type="checkbox"></td> <td>4.2. ะŸะพะดั‚ะตะบัั‚</td> </tr> <tr style="display: none;"> <td class="check"><input name="chk[4][3][0]" value="dng" type="checkbox"></td> <td>4.3. ะŸะพะดั‚ะตะบัั‚</td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script language="javascript"> $(function() { $('.dashed-span, .arrow').on('click', function() { $(this).parent().parent().parent().find('tr:not(:first)').toggle(); }); $('.groupswitchchb').on('click', function() { $checkboxParent = $(this).parent().parent().parent().find('input[type="checkbox"]:not(:first)'); if ($(this).is(':checked')) $checkboxParent.prop('checked', true); else $checkboxParent.prop('checked', false); }); }); </script> </body> </html>