'How to unchecked child checkbox on click parent checkbox
Hello I need to check and uncheck child checkboxes on click parent checkboxes, Right now I'm able to check child checkboxes but not able to uncheck those by click on the same, how to achieve this.
my code
HTML
<ul class="theme-list-p">
<li>
<input type="checkbox" name=""> Ambah
<ul class="theme-list-c">
<li><input type="checkbox" name=""> Kirnapur</li>
<li><input type="checkbox" name=""> Barwani</li>
<li><input type="checkbox" name=""> Sihora</li>
</ul>
</li>
<li><input type="checkbox" name=""> Sabalgarh
<ul class="theme-list-c">
<li><input type="checkbox" name=""> Village1</li>
<li><input type="checkbox" name=""> Village2</li>
<li><input type="checkbox" name=""> Village3</li>
</ul>
</li>
<li><input type="checkbox" name=""> Kailaras</li>
</ul>
CSS
.theme-list-p{
list-style: none;
padding-left: 10px;
font-weight: bold;
border:1px solid #dee2e6;
padding: 5px;
overflow-y: scroll;
min-height: 120px;
}
.theme-list-c{
list-style: none;
padding-left: 20px;
font-weight: 400;
}
jquery
<script type="text/javascript">
$(document).on('change', '.theme-list-p li', function(){
$(this).find('.theme-list-c li input').attr('checked', true);
});
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|