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>
You could do it like this:
$(document).on('change', '.theme-list-p li input', function() {
$(this).next('.theme-list-c').find('li input').attr('checked', $(this).is(":checked"));
});
Demo
$(document).on('change', '.theme-list-p li input', function() {
$(this).next('.theme-list-c').find('li input').attr('checked', $(this).is(":checked"));
});.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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>