triestado - checkbox html ejemplo

Casilla de verificación Tri-estado en HTML?

Question

No hay forma de tener un botón de comprobación de tres estados (sí, no, nulo) en HTML, ¿verdad?

¿Hay algún truco simple o solución de problemas sin tener que renderizarlo todo por uno mismo?

Answer 1

Además de todo lo mencionado anteriormente, existen complementos de jQuery que también pueden ser útiles:

para casillas de verificación individuales:

• jQuery-Tristate-Checkbox-plugin: http://vanderlee.github.io/tristate/

para casillas de verificación de comportamiento similar a un árbol:

• jQuery Tristate: http://jlbruno.github.io/jQuery-Tristate-Checkbox-plugin/

EDITAR Ambas bibliotecas usan el atributo de casilla de verificación '' indeterminado '', ya que este atributo en Html5 es solo para el estilo ( https://www.w3.org/TR/2011/WD-html5-20110113/number-state.html#checkbox-state ), el valor nulo nunca se envía al servidor (las casillas de verificación solo pueden tener dos valores).

Para poder enviar este valor al servidor, he creado campos de contraparte ocultos que se completan en el envío del formulario utilizando algunos javascript. En el lado del servidor, necesitaría verificar esos campos de contraparte en lugar de casillas de verificación originales, por supuesto.

He usado la primera biblioteca (casillas de verificación independientes) donde es importante:

• Inicialice los valores verificados, no verificados, indeterminados
• use la función .val () para obtener el valor real
• No se puede hacer el trabajo. Estado (probablemente mi error)

Espero que ayude.

Answer 2

Al igual que la respuesta @Franz, también puedes hacerlo con un seleccionar. Por ejemplo:

<select>
  <option></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>

Con esto también puede dar un valor concreto que se enviará con el formulario, creo que con la versión indeterminada de javascript de casilla de verificación, enviará el valor subrayado de la casilla de verificación.

Al menos, puede usarlo como una devolución de llamada cuando javascript esté desactivado. Por ejemplo, déle una identificación y en el evento de carga cámbiela a la versión de javascript de la casilla con estado indeterminado.

Answer 3

Creo que la forma más semántica es usar el atributo de readonly que las entradas de casilla de verificación pueden tener. Sin css, sin imágenes, etc. una propiedad HTML incorporada!

Ver violín:
http://jsfiddle.net/chriscoyier/mGg85/2/

Como se describe aquí en el último truco: http://css-tricks.com/indeterminate-checkboxes/

Answer 4

El plugin de jQuery "jstree" con el complemento de casilla de verificación puede hacer esto.

http://www.jstree.com/documentation/checkbox

-Mate

Answer 5

Es posible tener elementos de formulario HTML deshabilitados , ¿no es así? Sus usuarios lo verían en uno de tres estados, es decir, marcado, desmarcado y deshabilitado, que aparecería atenuado y no se podría hacer clic. Para mí, eso parece similar a "nulo" o "no aplicable" o lo que sea que estés buscando en ese tercer estado.

Answer 6

Hay una implementación simple de campo de entrada de tres estados de JavaScript en https://github.com/supernifty/tristate-checkbox

Answer 7

Mi propuesta sería usar

• tres caracteres Unicode apropiados para los tres estados, por ejemplo, ❓, ✅, ❌
• un campo de entrada de texto sin formato (tamaño = 1)
• Sin bordes
• solo lectura
• no mostrar cursor
• controlador onclick para alternar entre los tres estados

Ver ejemplos en:

• http://service.bitplan.com/com/bitplan/tristate/tristate.php
• http://jsfiddle.net/wf_bitplan_com/941std72/8/

Fuente HTML:

<input type=''text'' 
       style=''border: none;'' 
       onfocus=''this.blur()'' 
       readonly=''true'' 
       size=''1'' 
       value=''&#x2753;'' onclick=''tristate_Marks(this)'' />

o como javascript en línea:

<input style="border: none;"
       id="tristate" 
       type="text"  
       readonly="true" 
       size="1" 
       value="&#x2753;"  
       onclick="switch(this.form.tristate.value.charAt(0)) { 
         case ''&#x2753'': this.form.tristate.value=''&#x2705;''; break;  
         case ''&#x2705'': this.form.tristate.value=''&#x274C;''; break; 
         case ''&#x274C'': this.form.tristate.value=''&#x2753;''; break; 
       };" />

Código fuente de Javascript:

<script type="text/javascript" charset="utf-8">
  /**
   *  loops thru the given 3 values for the given control
   */
  function tristate(control, value1, value2, value3) {
    switch (control.value.charAt(0)) {
      case value1:
        control.value = value2;
      break;
      case value2:
        control.value = value3;
      break;
      case value3:
        control.value = value1;
      break;
      default:
        // display the current value if it''s unexpected
        alert(control.value);
    }
  }
  function tristate_Marks(control) {
    tristate(control,''/u2753'', ''/u2705'', ''/u274C'');
  }
  function tristate_Circles(control) {
    tristate(control,''/u25EF'', ''/u25CE'', ''/u25C9'');
  }
  function tristate_Ballot(control) {
    tristate(control,''/u2610'', ''/u2611'', ''/u2612'');
  }
  function tristate_Check(control) {
    tristate(control,''/u25A1'', ''/u2754'', ''/u2714'');
  }

</script>

Answer 8

Necesitarás usar javascript / css para simularlo.

Pruebe aquí un ejemplo: http://www.dynamicdrive.com/forums/archive/index.php/t-26322.html

Answer 9

Podría usar el atributo IDL indeterminate de HTML en input elementos de input .

Answer 10

Puede usar grupos de radio para lograr esa funcionalidad:

<input type="radio" name="choice" value="yes" />Yes
<input type="radio" name="choice" value="No" />No
<input type="radio" name="choice" value="null" />null

Answer 11

Puede usar un estado indeterminado: http://css-tricks.com/indeterminate-checkboxes/ . Es compatible con los navegadores listos para usar y no requiere ninguna biblioteca js externa.

Answer 12

Refiriéndome a @BoltClock answer , aquí está mi solución para un método recursivo más complejo:

http://jsfiddle.net/gx7so2tq/2/

Puede que no sea la solución más bonita, pero funciona bien para mí y es bastante flexible.

Uso dos objetos de datos que definen el contenedor:

data-select-all="chapter1"

y los elementos en sí:

data-select-some="chapter1"

Ambos tienen el mismo valor. La combinación de ambos objetos de datos dentro de una casilla de verificación permite subniveles, que se escanean recursivamente. Por lo tanto, se necesitan dos funciones de "ayuda" para evitar el cambio de gatillo.

Answer 13

Editar

Gracias al comentario de Janus Troelsen, encontré una mejor solución.

HTML5 define una propiedad para casillas de verificación llamadas indeterminate

Ver la guía de referencia w3c . Para hacer que la casilla de verificación aparezca visualmente indeterminada, establézcala en verdadero:

element.indeterminate = true;

Aquí está el violín de Janus Troelsen . Tenga en cuenta, sin embargo, que:

• El estado indeterminate no se puede establecer en el marcado HTML, solo se puede hacer a través de Javascript (consulte esta prueba JSfiddle y este artículo detallado en trucos CSS ).

• Este estado no cambia el valor de la casilla de verificación, solo es una señal visual que enmascara el estado real de la entrada.

• Prueba del navegador: funcionó para mí en Chrome 22, Firefox 15, Opera 12 y de vuelta en IE7. Con respecto a los navegadores móviles, el navegador Android 2.0 y Safari mobile en iOS 3.1 no tienen soporte para eso.

Respuesta anterior

Otra alternativa sería jugar con la casilla de verificación de transparencia para el estado "algunos seleccionados" (como Gmail lo hace en versiones anteriores). Requerirá algo de javascript y una clase de CSS. Aquí pongo un ejemplo particular que maneja una lista con elementos seleccionables y una casilla de verificación que permite seleccionar todos / ninguno de ellos. Esta casilla de verificación muestra un estado "algo seleccionado" cuando se seleccionan algunos de los elementos de la lista.

Dada una casilla de verificación con ID #select_all y varias casillas de verificación con una clase .select_one ,

La clase de CSS que desvanece la casilla de verificación "seleccionar todo" sería la siguiente:

.some_selected {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Y el código JS que maneja el tri-estado de la casilla de verificación Seleccionar todo es el siguiente:

$(''#select_all'').change (function ()
{
    //Check/uncheck all the list''s checkboxes
    $(''.select_one'').attr(''checked'', $(this).is('':checked''));
    //Remove the faded state
    $(this).removeClass(''some_selected'');
});

$(''.select_one'').change (function ()
{
    if ($(''.select_one:checked'').length == 0)
        $(''#select_all'').removeClass(''some_selected'').attr(''checked'', false);
    else if ($(''.select_one:not(:checked)'').length == 0)
        $(''#select_all'').removeClass(''some_selected'').attr(''checked'', true);
    else
        $(''#select_all'').addClass(''some_selected'').attr(''checked'', true);
});

Puede intentarlo aquí: http://jsfiddle.net/98BMK/

¡Espero que ayude!