Флажок внутри флажка в раскрывающемся списке

Я работал над созданием флажка внутри флажка, который должен отображаться внутри раскрывающегося списка. Мне удалось создать пару флажков в раскрывающемся списке. перейдите по ссылке http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php

Теперь я пытаюсь создать флажок, который должен появиться после того, как пользователь нажмет один флажок. Например, если пользователь проверяет документы, после этого флажок должен появиться несколько флажков.

Eg. []Documents (if user checks main, the sub checkboxes should appear) []Doc 1 []Doc 2 []Doc 3 []Phots (if user checks) []photo 1 []photo 2 []photo 3 

Как достичь этого через javascript или jquery.

Заранее спасибо. !!

Существуют разные способы сделать это. Это то, что я сделал:

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.team').on('click',function(){ if($(this).is(':checked')){ $(this).next().next().show(); }else{ $(this).next().next().hide(); } }); }); </script> </head> <body> <form name="FootballClubs"> <input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br /> <div style="padding:10px 10px 10px 15px;display:none;"> <input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br /> <input type="checkbox" class="player" value="SA"/>Shabi Alanso<br /> <input type="checkbox" class="player" value="IC"/>Iker Casillias<br /> </div> <input type="checkbox" class="team" value="ManCity"/>Man City<br /> <div style="padding:10px 10px 10px 15px;display:none;"> <input type="checkbox" class="player" value="SA"/>Sergio Aguero<br /> <input type="checkbox" class="player" value="SM"/>Super Mario<br /> </div> </form> </body> </html> 

Это полностью рабочий пример. Кроме того, вы можете снять флажки с отмеченными элементами, когда они снова будут скрыты.