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 >
                          <li>
                            <input type="checkbox" name="">&nbsp;&nbsp;Ambah
                            <ul >
                              <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 >
                              <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>

CodePudding user response：

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 >
  <li>
    <input type="checkbox" name="">&nbsp;&nbsp;Ambah
    <ul >
      <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 >
      <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>