如何在单击父复选框时取消选中子复选框

Question

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="">&nbsp;&nbsp;Ambah
                            <ul class="theme-list-c">
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Kirnapur</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Barwani</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Sihora</li>
                            </ul>
                          </li>
                          <li><input type="checkbox" name="">&nbsp;&nbsp;Sabalgarh
                            <ul class="theme-list-c">
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village1</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village2</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village3</li>
                            </ul>
                          </li>
                          <li><input type="checkbox" name="">&nbsp;&nbsp;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>

Answer 1

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="">&nbsp;&nbsp;Ambah <ul class="theme-list-c"> <li><input type="checkbox" name="">&nbsp;&nbsp;Kirnapur</li> <li><input type="checkbox" name="">&nbsp;&nbsp;Barwani</li> <li><input type="checkbox" name="">&nbsp;&nbsp;Sihora</li> </ul> </li> <li><input type="checkbox" name="">&nbsp;&nbsp;Sabalgarh <ul class="theme-list-c"> <li><input type="checkbox" name="">&nbsp;&nbsp;Village1</li> <li><input type="checkbox" name="">&nbsp;&nbsp;Village2</li> <li><input type="checkbox" name="">&nbsp;&nbsp;Village3</li> </ul> </li> <li><input type="checkbox" name="">&nbsp;&nbsp;Kailaras</li> </ul>