html - para - que significa alt en una imagen

Cómo lidiar con las diferencias del navegador con una casilla indeterminada

Question

Primer: una casilla de verificación HTML se puede establecer como indeterminate , que no se muestra ni marcada ni desmarcada. Incluso en este estado indeterminado, todavía hay un estado booleano checked subyacente.

Cuando se hace clic en una casilla indeterminada, pierde su estado indeterminate . Dependiendo del navegador (Firefox), también puede alternar la propiedad checked .

Este jsfiddle ilustra la situación. En Firefox, al hacer clic en una de las casillas de verificación una vez, hace que alternen el estado checked subyacente inicial. En IE, la propiedad checked se deja solo para el primer clic.

Me gustaría que todos los navegadores se comporten igual, incluso si esto implica javascript adicional. Desafortunadamente, la propiedad indeterminate se configura como falsa antes de que se onclick controlador onclick (o change y jquery), por lo que no puedo detectar si se solicita un clic en una casilla indeterminate o no.

Los mouseup y keyup (para barra espaciadora) muestran el estado anterior indeterminate , pero prefiero no ser tan específico: parece frágil.

Podría mantener una propiedad separada en la casilla de verificación ( data-indeterminate o similar), pero quería saber si me falta una solución simple y / o si otras personas tienen problemas similares.

Answer 1

Bien, haga su propia imagen clicable y use algunos java (script) para que se comporte de esa manera. Dudo mucho cuántos usuarios entenderían este estado, así que ten cuidado donde lo usas.

Answer 2

Esto resolvió mi problema

$(".checkbox").click(function(){
$(this).change();
});

Answer 3

No estoy seguro de que el uso de la función para establecer el valor de las casillas de verificación indeterminadas sea una buena solución porque:

• Tendrás que cambiar cada lugar donde los estés usando,
• si el usuario envía un formulario sin hacer clic en las casillas de verificación, el valor que recibirá su servidor será diferente dependiendo del navegador.

Pero me gusta la forma inteligente de determinar cómo funciona el navegador. De modo que podría verificar isCheckedAfterIndeterminate() lugar window.navigator.userAgent.indexOf(''Trident'') >= 0 para ver si es IE (o tal vez otro navegador que funciona de forma inusual).

Entonces mi solución será:

/// Determine the checked state to give to a checkbox
/// with indeterminate state, so that it becomes checked
/// on click on IE, Chrome and Firefox 5+
function isCheckedAfterIndeterminate()
{
// Create a unchecked checkbox with indeterminate state
var test = document.createElement("input");
test.type = "checkbox";
test.checked = false;
test.indeterminate = true;
// Try to click the checkbox
var body = document.body;
body.appendChild(test); // Required to work on FF
test.click();
body.removeChild(test); // Required to work on FF
// Check if the checkbox is now checked and cache the result
if (test.checked) {
isCheckedAfterIndeterminate = function () { return false; };
return false;
} else {
isCheckedAfterIndeterminate = function () { return true; };
return true;
}
}
// Fix indeterminate checkbox behavoiur for some browsers.
if ( isCheckedAfterIndeterminate() ) {
$(function(){
$(document).on(''mousedown'', ''input'', function(){
// Only fire the change event if the input is indeterminate.
if ( this.indeterminate ) {
this.indeterminate = false;
$(this).trigger(''change'');
}
});
});
}

Answer 4

Si desea tener una casilla indeterminada que se comprueba en todos los navegadores al hacer clic (o al menos en IE, Chrome y FF5 +), debe inicializar correctamente el atributo comprobado, como se muestra aquí http://jsfiddle.net/K6nrT/6/ . He escrito las siguientes funciones para ayudarte:

/// Gives a checkbox the inderminate state and the right
/// checked state so that it becomes checked on click
/// on click on IE, Chrome and Firefox 5+
function makeIndeterminate(checkbox)
{
checkbox.checked = getCheckedStateForIndeterminate();
checkbox.indeterminate = true;
}

y la función interesante que se basa en la detección de características:

/// Determine the checked state to give to a checkbox
/// with indeterminate state, so that it becomes checked
/// on click on IE, Chrome and Firefox 5+
function getCheckedStateForIndeterminate()
{
// Create a unchecked checkbox with indeterminate state
var test = document.createElement("input");
test.type = "checkbox";
test.checked = false;
test.indeterminate = true;
// Try to click the checkbox
var body = document.body;
body.appendChild(test); // Required to work on FF
test.click();
body.removeChild(test); // Required to work on FF
// Check if the checkbox is now checked and cache the result
if (test.checked)
{
getCheckedStateForIndeterminate = function () { return false; };
return false;
}
else
{
getCheckedStateForIndeterminate = function () { return true; };
return true;
}
}

Sin trucos de imágenes, sin jQuery, sin atributos adicionales y sin manejo de eventos. Esto se basa solo en la inicialización de JavaScript simple (tenga en cuenta que el atributo "indeterminado" no se puede establecer en el marcado HTML, por lo que la inicialización de JavaScript se habría requerido de todos modos).