HTML checkbox onclick llamado en Javascript

Estoy teniendo un poco de problemas tratando de encontrar la manera de hacer que una cierta parte de mi código funcione.HTML checkbox onclick llamado en Javascript

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);"> 
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>

Este es mi código HTML que funciona como debería (haciendo clic en el texto se hará clic en el cuadro). El javascript porque es bastante simple:

function toggleCheckbox(id) { 
    document.getElementById(id).checked = !document.getElementById(id).checked; 
}

Sin embargo quiero que el onclick que pasar para que la entrada cuando la etiqueta es lo que hace que la casilla de verificación que se hace clic. En este momento, onClick js no funciona. ¿Cuál es una sugerencia sobre cómo hacer esto? Intenté agregar el onclick de la entrada al clic de la etiqueta, pero eso no funciona.

Cualquier sugerencia/solución sería maravillosa.

Fuente

2010-07-07 Craig

¿Qué hay de poner el checkboxen ellabel, por lo que la etiqueta de forma automática "clic sensibles" para la casilla de verificación, y dando la casilla de verificación de un evento onchange?

<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....> 

function toggleCheckbox(element) 
{ 
    element.checked = !element.checked; 
}

Este será, además, atrapar a los usuarios utilizar un teclado para cambiar la casilla de verificación, algo onclick no lo haría.

Fuente

2010-07-07 18:28:42 Unicron

Usando el atributo 'for' es tan bueno como poner la entrada dentro de la etiqueta, pero sí reduce el margen de beneficio de un poco . +1 por 'onchange' y pensando en nosotros los usuarios de teclado humilde :-) –

@Andy E - En teoría sí, en realidad no. IE 6 e IE 7 no manejan correctamente las etiquetas implícitas (http://www.evotech.net/blog/2009/09/ie6ie7-implicit-label-bug/). Las etiquetas explícitas son preferidas. –

Si colocar la etiqueta en el exterior hace que sea autoclickable, ya no se necesita el toggleCheckbox. Sin embargo, selectAll es, que si reemplazo el toggleCheckbox (this) para el selectAll en su ejemplo, no funciona en absoluto. Sin embargo, me gusta tener las etiquetas en el exterior y utilizar onchange en su lugar. – Craig

La etiqueta sin un clic se comportará como era de esperar. Cambia la entrada. Lo que realmente quiere es ejecutar selectAll() cuando hace clic en una etiqueta, ¿verdad? Luego solo agregue seleccionar todo en la etiqueta al hacer clic. O envuelva la entrada en el la etiqueta y asignar onclick sólo para la etiqueta

<label for="check_all_1" onclick="selectAll(document.wizard_form, this);"> 
    <input type="checkbox" id="check_all_1" name="check_all_1" title="Select All"> 
    Select All 
</label>

Fuente

2010-07-07 18:30:23 galambalazs

Al hacer esto, la casilla de verificación nunca se marca ni ninguna de las casillas de verificación. Seleccionar todos Tiene razón Quiero que selectAll() se ejecute cuando se presiona la etiqueta. – Craig

Se arregló, hizo esto, olvidó que este debería ser el nombre de identificación para la sección de la etiqueta. – Craig

jQuery tiene una función que puede hacer esto:

incluyen la siguiente secuencia de comandos en su cabeza:
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
```
(o simplemente descargue el archivo jQuery.js en línea e inclúyalo localmente)

uso de este script para activar la casilla de verificación cuando se hace clic en la entrada:

var toggle = false; 
$("#INPUTNAMEHERE").click(function() { 
     $("input[type=checkbox]").attr("checked",!toggle); 
     toggle = !toggle; 
});

Eso debería hacer lo que quiera si entendía lo que estaba tratando de hacer.

Fuente

2010-07-07 18:43:32 rownage

Quiero hacer que este cambio sea pequeño, ya que se realizará en docenas de ubicaciones en un sistema antiguo que no hace que los cambios a gran escala sean fáciles. – Craig

La parte de docenas de ubicaciones se cubriría fácilmente con esto, ya que jQuery está diseñado para funcionar en archivos y sistemas grandes (como la mayoría de los lenguajes de scripting). Pero si crees que tu sistema es demasiado viejo para hacer un cambio como este, entonces supongo que no seré de mucha utilidad en este caso. Sin embargo, si nunca usaste jQuery, te sugiero que eches un vistazo cuando tengas tiempo ... es genial para manejar comportamientos como este. – rownage

También puede extraer el código de evento del HTML, así:

<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" /> 
<label for="check_all_1">Select All</label> 

<script> 
function selectAll(frmElement, chkElement) { 
    // ... 
} 
document.getElementById("check_all_1").onclick = function() { 
    selectAll(document.wizard_form, this); 
} 
</script>

Fuente

2010-07-07 19:21:06 mexique1

HTML checkbox onclick llamado en Javascript

Respuesta

Cuestiones relacionadas