check if checkbox is checked jquery

si la casilla de verificación está marcada, haz esto

Question

Cuando marque una casilla de verificación, quiero que cambie <p> #0099ff .

Cuando desactivo la casilla de verificación, quiero que deshaga eso.

Código que tengo hasta ahora:

$(''#checkbox'').click(function(){
if ($(''#checkbox'').attr(''checked'')) {
/* NOT SURE WHAT TO DO HERE */
}
})

Answer 1

Implementación óptima

$(''#checkbox'').on(''change'', function(){
$(''p'').css(''color'', this.checked ? ''#09f'' : '''');
});

Manifestación

$(''#checkbox'').on(''change'', function(){
$(''p'').css(''color'', this.checked ? ''#09f'' : '''');
});

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>

Answer 2

¿Por qué no utilizar los eventos integrados?

$(''#checkbox'').click(function(e){
if(e.target.checked) {
// code to run if checked
console.log(''Checked'');
} else {
//code to run if unchecked
console.log(''Unchecked'');
}
});

Answer 3

Descubrí una solución loca para lidiar con este problema de casilla de verificación que no está marcada o marcada aquí es mi algoritmo ... crear una variable global digamos var check_holder

check_holder tiene 3 estados

1. estado indefinido
2. 0 estado
3. 1 estado

Si se hace clic en la casilla de verificación,

$(document).on("click","#check",function(){
if(typeof(check_holder)=="undefined"){
//this means that it is the first time and the check is going to be checked
//do something
check_holder=1; //indicates that the is checked,it is in checked state
}
else if(check_holder==1){
//do something when the check is going to be unchecked
check_holder=0; //it means that it is not checked,it is in unchecked state
}
else if(check_holder==0){
//do something when the check is going to be checked
check_holder=1;//indicates that it is in a checked state
}
});

El código anterior se puede usar en muchas situaciones para averiguar si se ha marcado o no marcado una casilla de verificación. El concepto detrás de esto es guardar los estados de la casilla de verificación en una variable, es decir, cuando está encendida, apagada. Espero que la lógica se pueda usar para resolver su problema.

Answer 4

Probablemente puede ir con este código para tomar medidas ya que la casilla de verificación está marcada o desmarcada.

$(''#chk'').on(''click'',function(){
if(this.checked==true){
alert(''yes'');
}else{
alert(''no'');
}
});

Answer 5

Prueba esto.

$(''#checkbox'').click(function(){
if (this.checked) {
$(''p'').css(''color'', ''#0099ff'')
}
})

Algunas veces exageramos jquery. Se pueden lograr muchas cosas usando jquery con javascript simple.

Answer 6

Puede suceder que "this.checked" esté siempre "on". Por lo tanto, recomiendo:

$(''#checkbox'').change(function() {
if ($(this).is('':checked'')) {
console.log(''Checked'');
} else {
console.log(''Unchecked'');
}
});

Answer 7

Verifique este código:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$(''#change_password'').click(function(){
if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
alert("checked");
}
else if($(this).prop("checked") == false){
alert("Checkbox is unchecked.");
}
});
</script>

Answer 8

Yo use .change() y this.checked :

$(''#checkbox'').change(function(){
var c = this.checked ? ''#f00'' : ''#09f'';
$(''p'').css(''color'', c);
});

-

Sobre el uso de this.checked
Andy E ha escrito muy bien sobre la forma en que tendemos a usar en exceso jQuery: utilizando el asombroso poder de jQuery para acceder a las propiedades de un elemento . El artículo trata específicamente el uso de .attr("id") pero en el caso de que #checkbox sea un elemento <input type="checkbox" /> el problema es el mismo para $(...).attr(''checked'') (o incluso $(...).is('':checked'') ) vs. this.checked .

Answer 9

Yo lo haría :

$(''#checkbox'').on("change", function (e){
if(this.checked){
// Do one thing
}
else{
// Do some other thing
}
});

Ver: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Answer 10

es mejor si defines una clase con un color diferente, luego cambias la clase

$(''#checkbox'').click(function(){
var chk = $(this);
$(''p'').toggleClass(''selected'', chk.attr(''checked''));
})

de esta manera, su código es más limpio porque no tiene que especificar todas las propiedades CSS (digamos que desea agregar un borde, un estilo de texto u otro ...) pero simplemente cambia una clase

Answer 11

$(''#checkbox'').change(function(){
(this.checked)?$(''p'').css(''color'',''#0099ff''):$(''p'').css(''color'',''another_color'');
});