¿marcar/desmarcar checkbox usando jquery?

Tengo algunos campos de texto de entrada en mi página y estoy mostrando sus valores usando JavaScript.

Estoy usando .set("valor","") función para editar el valor, añadir un campo de casilla de verificación adicional, y para pasar un valor.

Aquí quiero comprobar que si value == 1, entonces este checkbox debería estar marcado. De lo contrario, debe permanecer sin marcar.

Hice esto usando dos divs, pero no me siento cómodo con eso, ¿hay alguna otra solución?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}
Aniket G
Pregunta editada 11º marzo 2019 в 11:51
Programación
jquery jquery-ui
2º julio 2013 в 8:09
14 vistas
Solución

Para jQuery 1.6+ :

.attr() está obsoleta para las propiedades; utilice en su lugar la nueva función .prop() como:

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

Para jQuery < 1.6:

Para marcar/desmarcar una casilla de verificación, usa el atributo checked y altera eso. Con jQuery puedes hacer:

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

Porque en HTML se vería algo así:

<input type="checkbox" id="myCheckbox" checked="checked" /> 
<input type="checkbox" id="myCheckbox" />

Sin embargo, no puedes confiar en el método .attr() para obtener el valor del checkbox (si lo necesitas). Tendrás que confiar en el método .prop().

Christopher Taylor
Respuesta editada 19º enero 2018 в 9:14
Comentarios (16)

Puede utilizar prop() para esto, ya que Antes de jQuery 1.6, el método .attr() a veces tenía en cuenta los valores de las propiedades cuando recuperaba algunos atributos, lo que podía causar un comportamiento inconsistente. A partir de jQuery 1.6, el método .prop() proporciona una forma de recuperar explícitamente los valores de las propiedades, mientras que .attr() recupera los atributos.

var prop=false;
if(value == 1) {
   prop=true; 
}
$('#checkbox').prop('checked',prop);

o simplemente,

$('#checkbox').prop('checked',(value == 1));

Recortes

begin snippet: js hide: false console: true babel: false -->

$(document).ready(function() {
  var chkbox = $('.customcheckbox');
  $(".customvalue").keyup(function() {
    chkbox.prop('checked', this.value==1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">

Fin del fragmento;

Rohan Kumar
Respuesta editada 31º enero 2017 в 4:35
Comentarios (0)

Puede establecer el estado de la casilla de verificación en función del valor:

$('#your-checkbox').prop('checked', value == 1);
Comentarios (1)