Las entradas de casilla de verificación solo pueden tener dos estados: marcado o no marcado. Pueden tener cualquier valor, pero envían ese valor (marcado) o no lo envían (sin marcar) con el envío de un formulario. El valor predeterminado no está marcado. Puedes controlar eso en HTML de esta manera:
<!-- Default to unchecked -->
<input type="checkbox">
<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />
<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>Visualmente, hay tres estados en los que puede estar una casilla de verificación: marcado, no marcado o indeterminado. Se ven así:
Aquí hay algunas cosas que debe saber sobre las casillas de verificación indeterminadas:
No puede hacer que una casilla de verificación sea indeterminada a través de HTML. No hay ningún atributo indeterminado. Sin embargo, es una propiedad de las casillas de verificación, que puede cambiar mediante JavaScript.
var checkbox = document.getElementById("some-checkbox");
checkbox.indeterminate = true;o estilo jQuery:
$("#some-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+El estado indeterminado es solo visual. La casilla de verificación todavía está marcada o desmarcada como estado. Eso significa que el estado visual indeterminado enmascara el valor real de la casilla de verificación, ¡para que tenga más sentido en su interfaz de usuario!
Como las propias casillas de verificación, el estado indeterminado se ve diferente en diferentes navegadores. Aquí está Opera 11.50 en Mac:
Caso de uso
La razón por la que estoy escribiendo esto es porque acaba de aparecer un caso de uso para este estado: casillas de verificación anidadas. Cada casilla de verificación puede tener casillas de verificación secundarias. Si se revisa a todos esos niños, es posible que se controle. Si ninguno está marcado, no está marcado. Si algunos de ellos están marcados, entonces está en un estado indeterminado (en este caso significa simbólicamente “parcialmente” marcado).
Aquí está eso en jQuery:
Consulte las casillas de verificación Pen Indeterminate de Chris Coyier (@chriscoyier) en CodePen.
Aquí hay una versión alternativa de jQuery de TheNotary.
Y aquí hay una versión simple de JavaScript de Jakob Eriksen:
Ver la pluma
Casillas de verificación indeterminadas (Vanilla JS) por jakob-e (@ jakob-e)
en CodePen.
Y un par de enfoques alternativos de Alvaro Montoro, Bramus, Gridbuilder, Lewin Probst y Jason Wilson.
Usando StimulusJS de Stephen Margheim:
Ver la pluma
checkbox family por Stephen Margheim (@smargh)
en CodePen.
Rotando entre los estados
Jon Stuebe estaba jugando con la idea de rotar el estado entre sin marcar, indeterminado y comprobado con un clic. Aquí hay algo de jQuery para hacer eso:
var $check = $("input[type=checkbox]"), el;
$check
.data('checked',0)
.click(function(e) {
el = $(this);
switch(el.data('checked')) {
// unchecked, going indeterminate
case 0:
el.data('checked',1);
el.prop('indeterminate',true);
break;
// indeterminate, going checked
case 1:
el.data('checked',2);
el.prop('indeterminate',false);
el.prop('checked',true);
break;
// checked, going unchecked
default:
el.data('checked',0);
el.prop('indeterminate',false);
el.prop('checked',false);
}
});Consulte las casillas de verificación Rotar el lápiz a través de indeterminadas de Chris Coyier (@chriscoyier) en CodePen.
Reader Casual Trash me envió una versión sin biblioteca y mucho más sucinta de rotar a través de los tres estados visuales que utiliza el readonly atributo que pueden tener las entradas de la casilla de verificación.
<!-- Inline click handler, just for demo -->
<input type="checkbox" id="cb1" onclick="ts(this)">function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}Consulte las casillas de verificación Rotar el lápiz a través de indeterminadas de Chris Coyier (@chriscoyier) en CodePen.