Marque/Desmarque todas las casillas de verificación

Question

He visto muchas marcas de verificación/desmarcar todas las casillas de verificación. Pero la mayoría no respeta que si alterne todas las casillas de verificación con la casilla de verificación "checked all" y luego desmarque una sola en la lista, la casilla de verificación "checked all" sigue estando marcada.

¿Hay una manera elegante de manejar este caso?

Answer 1

$('#checkAll').click(function() { 
    if(this.checked) { 
     $('input:checkbox').attr('checked', true); 
    } 
    else { 
     $('input:checkbox').removeAttr('checked'); 
    } 
}); 

$('input:checkbox:not(#checkAll)').click(function() { 
    if(!this.checked) { 
     $('#checkAll').removeAttr('checked'); 
    } 
    else { 
     var numChecked = $('input:checkbox:checked:not(#checkAll)').length; 
     var numTotal = $('input:checkbox:not(#checkAll)').length; 
     if(numTotal == numChecked) { 
      $('#checkAll').attr('checked', true); 
     } 
    } 
}); 

Demostración: http://jsfiddle.net/ThiefMaster/HuM4Q/

Como se señaló en el comentario de la pregunta, una casilla de verificación regular no es perfecto para esto. Mi implementación deshabilita el cuadro "marcar todo" tan pronto como una casilla está desmarcada. Por lo tanto, para desmarcar todas las casillas de verificación aún marcadas, tendrá que hacer clic dos veces (primero para volver a marcar las que no se marcaron y luego para desmarcar todas las demás). Sin embargo, con una casilla de verificación de tres estados esto podría ser necesario ya que la orden de estado podría estar desmarcada-> indefinida-> marcada-> desmarcada, por lo que necesitaría dos clics para pasar de indefinido a desmarcado.

---

Dado que es probable que no desea comprobar todas las casillas en su página en "Ver todos", reemplazar con, por ejemplo .autoCheckBox o input.autoCheckBox:checkbox y dé esas casillas de verificación class="autoCheckBox".

Si desea que todas las casillas de verificación dentro de una cierta forma, un uso simple #idOfYourForm input:checkbox o form[name=nameOfYourForm] input:checkbox

Answer 2

tal vez algo como esto:

$('tbody input:checkbox').change(function(){ 
    if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) { 
     $('#checkAll')[0].checked = false; 
    } 
}); 

Esto supone que #checkAll está en la sección thead de la tabla.

Answer 3

Puede lograr esto adjuntando un manejador de clic a cada una de las casillas de destino, y haga que ese manejador desactive la casilla de verificación "control" en función del estado colectivo de esas casillas de destino. Por lo tanto, algo como esto:

// Control checks/unchecks targets 
$('#controlcheckbox').click(function(){ 
    $('.targetcheckboxes').attr('checked', this.checked); 
}); 

// Targets affect control 
$('.targetcheckboxes').click(function(){ 
    if($('.targetcheckboxes:not(:checked)').length){ 
    $('#controlcheckbox').attr('checked',false); 
    } 
}); 

Incluso mejor - se puede adjuntar esta lógica a un elemento recipiente que encierra, y el reloj para el evento usando .delegate():

$('#some_container').delegate('.targetcheckboxes','click',function(){...}); 

Answer 4

$("#selectall").click(function(){ 
    var checked = $("#selectall").attr("checked"); 
    $(".selectone").attr("checked",checked); 
}); 

Para el ajuste de Seleccionar todo

$(".selectone").click(function(){ 
    var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get(); 
    var flg = true; 
    if(jQuery.inArray(false, net)){ 
    flg= false; 
    } 
    $("#selectall").attr("checked",flg); 
});