2011-06-07 34 views
29

¿Hay alguna manera de usar Javascript y HTML (5) para seleccionar parcialmente, como las casillas de verificación en un menú de instalación del programa cuando selecciona solo algunas de las opciones secundarias?Casilla de verificación parcialmente seleccionada con javascript

+1

¿qué quiere decir exactamente por 'seleccionar parcialmente lo haría más claro. – Devjosh

+0

@kassens answer hace exactamente de lo que estaba hablando. Seleccionar parcialmente significaba que en los menús de instalación del programa cuando solo seleccionaba algunas de las opciones secundarias, la casilla de verificación de la opción principal no estaba marcada o desmarcada, sino que simplemente estaba llena, lo que describiría como parcialmente seleccionado. – AsherMaximum

Respuesta

58

HTML5 definesindeterminate propiedad booleana.

Lo he probado solo en las últimas versiones de Safari, Chrome y Firefox. Todos apoyan el estado indeterminado.

Ejemplo: http://jsfiddle.net/5tpXc/

Editar: Tenga en cuenta que este no funcionará con navegadores más antiguos y quizá no con las versiones actuales de IE. Debería confiar en los hacks como se describe en otras respuestas aquí si desea admitir todos los navegadores.

+1

¡Estupendo, no sabía nada de eso! – David

+0

Tenía la esperanza de que hubiera algo html 5 que se encargara de esto, la figura html 4 no lo haría. Es para un programa de javascript que usaremos internamente, y la política de administración de la computadora de mi organización obliga a todos a tener Firefox (pero no a usarlo, solo tienen que tenerlo). De cualquier manera, es para el departamento de red, entonces yo ' No estoy preocupado por soportar IE. ¡Gracias por la ayuda! – AsherMaximum

+10

Por cierto, abrí tu violín en IE9, y mostró el estado indeterminado correctamente – AsherMaximum

5

Nope. Tendría que hacer un gráfico de casilla de verificación personalizado y fingirlo.

Editar: Consulte el @Kassen's answer para ver las casillas parcialmente marcadas en los navegadores compatibles con HTML5.

+0

Para los navegadores modernos esto no es cierto, ver [mi respuesta] (http://stackoverflow.com/questions/6269342/partially-select-checkbox-with-javascript/6269487#6269487). – kassens

+5

* se come su propio sombrero * – BumbleB2na

4

Las casillas de verificación HTML (es decir, input elementos del tipo checkbox) no tienen un tercer estado (parcialmente marcado). Entonces no, no hay una forma directa de hacer esto.

Lo que probablemente tendrías que hacer es crear una imagen personalizada con una marca de verificación y enlazar a sus diversos eventos (hacer clic, por ejemplo) para almacenar su "estado" actual en un campo de formulario hidden a través de JavaScript. Sin embargo, puede encontrarse con una serie de problemas con este enfoque.

Por ejemplo, la navegación por el teclado del formulario puede no ser posible para este elemento en particular. (¿Puede una pestaña para una imagen y enviar eventos del teclado? No estoy seguro.)

Además, podría intentar manipular atributos personalizados en un elemento de casilla de verificación a través de JavaScript para almacenar un tercer estado. Pero la representación del elemento en sí no tiene un indicador visual de algo así. Probablemente pueda manipular su estilo (color, color de fondo, color de borde, etc.) para intentar imitar el comportamiento visual. Pero es posible que no pueda alcanzar el estilo visual exacto que está utilizando como referencia.

Sin duda es una perspectiva interesante, y estoy lo suficientemente intrigado como para intentar implementar algo como esto en el futuro cercano. Pero con un elemento de casilla nativo, no es posible. Tiene solo dos estados.

Editar: Consulte @kassens' answer para hacer esto en HTML5. Si está limitado a versiones anteriores de HTML por algún motivo, entonces tendrá que ser un hack como se describe aquí. Pero si puedes confiar en los usuarios que soportan HTML5, parece que el soporte nativo está ahí.

Cuestiones relacionadas