Come posso reimpostare tutte le caselle di controllo in un documento utilizzando jQuery o puro JS?
Come posso reimpostare tutte le caselle di controllo in un documento utilizzando jQuery o puro JS?
Risposte:
Se intendi come rimuovere lo stato "selezionato" da tutte le caselle di controllo:
$('input:checkbox').removeAttr('checked');
Se desideri utilizzare la funzione di ripristino del modulo, è meglio utilizzare questo:
$('input[type=checkbox]').prop('checked',true);
O
$('input[type=checkbox]').prop('checked',false);
Sembra che removeAttr()non possa essere ripristinato da form.reset().
L'ho usato prima:
$('input[type=checkbox]').prop('checked', false);
sembra che .attr e .removeAttr non funzionino per alcune situazioni.
modifica: nota che in jQuery v1.6 e versioni successive, dovresti utilizzare .prop('checked', false)invece per una maggiore compatibilità cross-browser - vedi https://api.jquery.com/prop
Commenta qui: come reimpostare tutte le caselle di controllo utilizzando jQuery o JS puro?
In alcuni casi la casella di controllo potrebbe essere selezionata per impostazione predefinita. Se desideri ripristinare la selezione predefinita invece di impostarla come non selezionata, confronta la defaultCheckedproprietà.
$(':checkbox').each(function(i,item){
this.checked = item.defaultChecked;
});
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
$('input:checkbox').each(function() { this.checked = false; });
Per fare il contrario, vedere: Seleziona tutte le caselle di controllo per ID / classe
$(":checkbox:checked").each(function () {
this.click();
});
per deselezionare la casella selezionata, ruota la logica per fare il contrario
Puoi essere selettivo su quale div o parte della tua pagina può avere caselle di controllo selezionate e quali no. Mi sono imbattuto nello scenario in cui ho due moduli nella mia pagina e uno ha valori precompilati (per l'aggiornamento) e l'altro deve essere riempito di nuovo.
$('#newFormId input[type=checkbox]').attr('checked',false);
questo renderà solo le caselle di controllo nella forma con id newFormId come deselezionata.
Come detto nella risposta di Tatu Ulmanen, l' uso del seguente script farà il lavoro
$('input:checkbox').removeAttr('checked');
Ma, come diceva il commento di Blakomen , dopo la versione 1.6 è meglio usare jQuery.prop()invece
Nota che in jQuery v1.6 e versioni successive, dovresti usare .prop ('verificato', false) invece per una maggiore compatibilità cross-browser
$('input:checkbox').prop('checked', false);
Fare attenzione quando lo si utilizza jQuery.each()può causare problemi di prestazioni. (inoltre, evita jQuery.find()in questi casi. Usa ciascuno invece)
$('input[type=checkbox]').each(function()
{
$(this).prop('checked', false);
});
Ho usato qualcosa del genere
$(yourSelector).find('input:checkbox').removeAttr('checked');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container check">
<button class="btn">click</button>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
</div>
<script>
$('.btn').click(function() {
$('input[type=checkbox]').each(function()
{
this.checked = false;
});
})
</script>
</body>
</html>