controllare / deselezionare checkbox usando jquery?

Ho alcuni campi di testo nella mia pagina e sto visualizzando i loro valori usando JavaScript.

Sto usando la funzione .set("value","") per modificare il valore, aggiungere un campo checkbox extra e passare un valore.

Qui voglio controllare che se value == 1, allora questa checkbox dovrebbe essere selezionata. Altrimenti, dovrebbe rimanere deselezionata.

Ho fatto questo usando due div, ma non mi sento a mio agio con questo, c'è qualche altra soluzione?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}
Aniket G
Domanda modificata 11º marzo 2019 в 11:51
Programmazione
jquery jquery-ui
2º luglio 2013 в 8:09
15 visualizzazioni
Soluzione

Per jQuery 1.6+ :

.attr() è deprecato per le proprietà; usare invece la nuova funzione .prop() come:

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

Per jQuery < 1.6:

Per selezionare/deselezionare una casella di controllo, usate l'attributo checked e modificatelo. Con jQuery si può fare:

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

Perché in HTML sembrerebbe qualcosa come:

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

Tuttavia, non potete fidarvi del metodo .attr() per ottenere il valore della casella di controllo (se ne avete bisogno). Dovrete affidarvi al metodo .prop().

Christopher Taylor
Risposta modificata 19º gennaio 2018 в 9:14
Commentari (16)

Si può usare prop() per questo, poiché prima di jQuery 1.6, il metodo .attr() a volte prendeva in considerazione i valori delle proprietà quando si recuperavano alcuni attributi, il che poteva causare un comportamento incoerente. A partire da jQuery 1.6, il metodo .prop() fornisce un modo per recuperare esplicitamente i valori delle proprietà, mentre .attr() recupera gli attributi.

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

o semplicemente,

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

Snippet

$(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">
Rohan Kumar
Risposta modificata 31º gennaio 2017 в 4:35
Commentari (0)

È possibile impostare lo stato della casella di controllo in base al valore:

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