objeto - Haga clic en un div para alternar una casilla de verificación dentro de él usando javascript
onclick jquery ejemplos (6)
Aquí está mi implementación de la casilla de verificación para div
Enlace: https://codepen.io/ashwinshenoy/pen/oYXqMV
<div id="checkboxes">
<input type="checkbox" name="rGroup" class="check_cat" value="Adventure Sports" id="r1"/>
<div class="check_overlay">
<i class="fa fa-check-circle"></i>
</div>
<label class="whatever" for="r1">
<img src="http://i.imgur.com/SfQVTlR.png" class=" img-responsive width100" />
<div class="row">
<div class="col-xs-offset-3 col-xs-3">
<div class="check_details">
<i class="fa fa-user"><span> 500</span></i>
</div><!--check_details end-->
</div><!--col-xs-* end-->
<div class="col-xs-3">
<div class="check_details">
<i class="fa fa-bitbucket"><span> 500</span></i>
</div><!--check_details end-->
</div><!--col-xs-* end-->
</div><!--inner row end-->
</label>
<br>
<div class="check_name_div">
Adventure Sports
</div>
</div><!--checkboxes end-->
CSS y JS en codepen actualizado
Esto parece ser un problema simple, pero no uso mucho javascript.
Tengo un div, con una casilla de verificación en él, y me gustaría que todo el div active la casilla de verificación. Esto es lo que tengo hasta ahora:
<div style="padding: 2em; border: 1px solid"
onClick="if (document.getElementById(''cb'').checked) document.getElementById(''cb'').checked=false; else document.getElementById(''cb'').checked=true;">
<input name="cb" id="cb" type="checkbox">
</div>
El único problema es que al hacer clic en la casilla de verificación real, se alterna dos veces y, por lo tanto, no cambia.
¿Algunas ideas?
Basado en algunas de las respuestas anteriores, esto es lo que mejor me funcionó con html como este:
<div class="option_item">
<input type="checkbox" value="1" checked="checked">
</div>
jQuery como este:
$.fn.toggleCheckbox = function() {
this.attr(''checked'', !this.attr(''checked''));
}
$(document).ready(function(){
$(".option_item").click(function (e) {
if (e.target.tagName != ''INPUT'') {
$(this).find("input").toggleCheckbox();
return false;
}
});
);
Es posible que pueda implementar esto de una manera más robusta y accesible utilizando el elemento de etiqueta para envolver el área en la que desea hacer clic.
Por ejemplo:
<label for="cb">
<div style="padding: 2em; border: 1px solid">
<input name="cb" id="cb" type="checkbox">
</div>
</label>
No he probado el código anterior, pero creo que todos los navegadores admiten hacer clic en las etiquetas para marcar un cuadro de entrada.
La raíz del problema es que al hacer clic en la casilla de verificación, el evento de clic se propaga por el DOM a los elementos principales.
Por lo tanto, la casilla de verificación controla el evento de clic al alternar entre sí, y luego el DIV recibe el evento de clic y vuelve a activar la casilla de verificación.
La solución más sencilla sería detener la propagación del evento, agregando esto al elemento de entrada:
onClick="event.stopPropagation();"
Si bien esto se define en el Modelo de eventos de nivel 2 de DOM del W3C, es posible que no sea compatible con todos los navegadores, por lo que es posible que desee utilizar una biblioteca de varios navegadores como Prototype o jQuery para garantizar la compatibilidad.
investiga el uso de jQuery en lugar de la programación contra el dom. el uso de una biblioteca como jQuery significa que es más probable que su código funcione en la mayoría de los navegadores
onclick="if (event.target.tagName != ''INPUT'') document.getElementById(''cb'').checked = !document.getElementById(''cb'').checked"