Hola, necesito marcar y desmarcar las casillas de verificación secundarias al hacer clic en las casillas de verificación principales. En este momento, puedo marcar las casillas de verificación secundarias pero no puedo desmarcarlas haciendo clic en el mismo, cómo lograr esto.
mi código
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
.tema-lista-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>Podrías hacerlo así:
$(document).on('change', '.theme-list-p li input', function() { $(this).next('.theme-list-c').find('li input').attr('checked', $(this).is(":checked")); });Manifestación
$(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>