En un div, tengo una casilla de verificación 'seleccionar todo'. Cuando esta casilla de verificación está marcada, todas las demás casillas de verificación se marcarán automáticamente. Quiero asignar sus valores como un nombre de clase. Puedo lograr esto cuando se marca una sola casilla de verificación. Pero ahora quiero que esto funcione cuando todas las casillas de verificación están marcadas a la vez cuando una casilla de verificación de selección completa está marcada.
$('.select-all').on('click', function() { let isSelected = $(this).is(':checked'); $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() { if (isSelected) { $(this).prop('checked', true); } else { $(this).prop('checked', false); } }) }); $('input:checkbox').not('.select-all').change(function() { var cl = $(this).val(); var cls = 'abc' + '' + cl + ''; if ($(this).is(':checked')) { $(this).addClass(cls); } else { $(this).removeClass(cls); } }) <div class="checkbox-list"> <label><input type="checkbox" class="select-all" name="">All</label> <label><input type="checkbox" name="" value="1">One</label> <label><input type="checkbox" name="" value="2">Two</label> <label><input type="checkbox" name="" value="3">Three</label> <label><input type="checkbox" name="" value="4">Four</label> <label><input type="checkbox" name="" value="5">Five</label> <label><input type="checkbox" name="" value="6">Six</label> <label><input type="checkbox" name="" value="6">Three</label> <label><input type="checkbox" name="" value="7">Four</label> <label><input type="checkbox" name="" value="8">Five</label> <label><input type="checkbox" name="" value="9">Six</label> </div>Prácticamente ya escribiste el código para lograr esto. Lo que hice aquí fue agregar cl = $(this).val(); y cls = 'abc' + '' + cl + ''; en cada ciclo y agregue la clase cuando isSelected sea verdadero, y elimínelo cuando sea falso.
$('.select-all').on('click', function() { let isSelected = $(this).is(':checked'); $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() { let cl = $(this).val(); let cls = 'abc' + '' + cl + ''; if (isSelected) { $(this).prop('checked', true); $(this).addClass(cls); } else { $(this).prop('checked', false); $(this).removeClass(cls); } }) }); $('input:checkbox').not('.select-all').change(function() { let cl = $(this).val(); let cls = 'abc' + '' + cl + ''; if ($(this).is(':checked')) { $(this).addClass(cls); } else { $(this).removeClass(cls); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="checkbox-list"> <label><input type="checkbox" class="select-all" name="">All</label> <label><input type="checkbox" name="" value="1">One</label> <label><input type="checkbox" name="" value="2">Two</label> <label><input type="checkbox" name="" value="3">Three</label> <label><input type="checkbox" name="" value="4">Four</label> <label><input type="checkbox" name="" value="5">Five</label> <label><input type="checkbox" name="" value="6">Six</label> <label><input type="checkbox" name="" value="6">Three</label> <label><input type="checkbox" name="" value="7">Four</label> <label><input type="checkbox" name="" value="8">Five</label> <label><input type="checkbox" name="" value="9">Six</label> </div>