Estoy intentando agregar una clase cuando se marca una casilla de verificación.Jquery si la casilla de verificación está marcada agregue una clase
Mi jQuery:
$('input').attr("checked").change(function(){
$('div.menuitem').addClass("menuitemshow");
})
No use $("input") para seleccionar un checkbox, de entrada se seleccionarán todas las entradas. En su lugar se puede utilizar :
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$('div.menuitem').addClass("menuitemshow");
} else {
$('div.menuitem').removeClass("menuitemshow");
}
});
Básicamente lo que esto hace es ejecutar lo que hay dentro del function(){} cuando se cambia la casilla de verificación. A continuación, sólo se puede usar jQuery is para comprobar si la casilla está marcada o no ..
Prueba esto:
$('input').change(function(){
if ($(this).is(':checked')) {
$('div.menuitem').addClass("menuitemshow");
}
});
no se puede tener un evento de cambio en un atributo, en lugar comprobar el evento de cambio de la propia casilla de verificación y ejecutar una condición para ver si ha sido revisado.
Agregaría el bloque else con removeClass – heximal
El OP nunca especificó eso en la pregunta, por lo que es mejor simplemente solucionar el problema que están teniendo, pueden modificarlo cuando estén listos. –
Hice $ ('div.menuitem'). RemoveClass ("menuitem") addClass ("menuitemshow"); y la clase se elimina, pero en la actualización del navegador, el elemento de menú de la clase se agrega nuevamente, aunque la casilla aún está marcada –
Supongo que querrá alternar la clase con la casilla de verificación.
$('input').change(function(){
var $this = $(this), $div = $('div.menuitem');
if($this.is(':checked'))
{
$div.addClass('show');
}
else
{
$div.removeClass('show');
}
}).change();
He actualizado se trata de un tema sugerido solución @Rails principiante dados los comentarios que he leído hasta ahora.
Tenga en cuenta la adición de change() en la última línea. Esto es para forzar change ejecutar inmediatamente en la carga de la página (supongo que $('input') espera document.ready o es después de se crea el).
Esto no es correcto, no quiere agregar la clase a la casilla de verificación, sino al 'div.menuitem' –
Quiero cambiar la clase en el div cuando la casilla de verificación está marcada –
@Rails beginner, you want para convertir 'div.menuitem' en' div.menuitemshow' en lugar de 'div.menuitem.menuitemshow'? Sugeriría alternar la clase 'show' para que' div.menuitem' se convierta en 'div.menuitem.show', es mucho más modular de esa manera. – zzzzBov
$('input:checkbox').change(function() {
if (this.checked) {
$('div.menuitem').addClass("menuitemshow");
}
});
// if checkbox checked then backgorund color will be gray
// there should be a input type check box with a parent class label.
$('input:checkbox').change(function(){
if($(this).is(':checked'))
$(this).parent().addClass('selected');
else
$(this).parent().removeClass('selected')
});
// input check box should be like this
<label class="" ><input type="checkbox" name="blabla" /></label>
esto añadirá la clase "seleccionado" en la etiqueta de la etiqueta()
//css
.selected {
background:gray
}
Esto debería marcarse como la respuesta correcta. La respuesta aceptada agrega la clase a cada elemento div.menuitem mientras que este solo agrega la clase al elemento primario del elemento seleccionado. – HPWD
$('.vfb-checkbox input:checkbox').change(function(){
if($(this).is(":checked")) {
$('.vfb-checkbox label').addClass("checked");
} else {
$('.vfb-checkbox label').removeClass("checked");
}
});.vfb-checkbox{
width:180px;
height:130px;
background:url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/2932337756_1845773ed4_q_d_zpsea5idhnt.jpg');
}
/* checkboxes */
.vfb-checkbox label {
\t \t cursor: pointer;
\t display: block;
\t position: relative;
width:100%;
height:100%;
\t }
.vfb-checkbox label:hover{
background:rgba(0,0,0,.7) url(http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png)center center no-repeat;
}
\t
.vfb-checkbox input[type=checkbox] {
\t display: none;
\t }
\t
.checked{
\t background: rgba(0,0,0,.4) url('http://i304.photobucket.com/albums/nn181/Amam_Dewan/selected_zpsvfoaira0.png') center center no-repeat;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>
<div class="vfb-checkbox">
<label id="checkbox" for="check1">
<input id="check1" type="checkbox" name="check" value="check1">
</label>
</div>Utilicé jquery en la casilla de verificación. Cuando hice clic en un elemento, los demás elementos se verán afectados. ¿Como puedo solucionar este problema?
No funciona, no pasa nada –
Ok, ¿puedes publicar el HTML que estás usando? Es difícil tratar de diagnosticar el problema sin ver eso también. – betamax
Si la respuesta aceptada no funciona para usted, pruebe la solución provista por Dinesh Gunarathne. – HPWD