Jak mogę zresetować wszystkie pola wyboru w dokumencie za pomocą jQuery lub czystego JS?
Jak mogę zresetować wszystkie pola wyboru w dokumencie za pomocą jQuery lub czystego JS?
Odpowiedzi:
Jeśli masz na myśli, jak usunąć stan „zaznaczony” ze wszystkich pól wyboru:
$('input:checkbox').removeAttr('checked');
Jeśli chcesz skorzystać z funkcji resetowania formularza, lepiej użyj tego:
$('input[type=checkbox]').prop('checked',true);
LUB
$('input[type=checkbox]').prop('checked',false);
Wygląda na to, że removeAttr()nie można go zresetować form.reset().
Używałem tego wcześniej:
$('input[type=checkbox]').prop('checked', false);
wydaje się, że .attr i .removeAttr nie działają w niektórych sytuacjach.
edycja: Zauważ, że w jQuery v1.6 i nowszych powinieneś używać .prop('checked', false)zamiast tego dla większej kompatybilności z różnymi przeglądarkami - zobacz https://api.jquery.com/prop
Skomentuj tutaj: Jak zresetować wszystkie pola wyboru za pomocą jQuery lub czystego JS?
W niektórych przypadkach pole wyboru może być zaznaczone domyślnie. Jeśli chcesz przywrócić domyślny wybór zamiast ustawiać go jako niezaznaczony, porównaj defaultCheckedwłaściwość.
$(':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; });
Aby zrobić odwrotnie, zobacz: Zaznacz wszystkie pola wyboru według identyfikatora / klasy
$(":checkbox:checked").each(function () {
this.click();
});
do niezaznaczonego pola wyboru, obróć swoją logikę na odwrót
Możesz wybrać, który element div lub część strony może mieć zaznaczone pola wyboru, a który nie. Natknąłem się na scenariusz, w którym mam dwa formularze na mojej stronie i jeden ma wstępnie wypełnione wartości (do aktualizacji), a inne muszą być wypełnione na nowo.
$('#newFormId input[type=checkbox]').attr('checked',false);
spowoduje to, że tylko pola wyboru w formularzu z id newFormId będą niezaznaczone.
Jak powiedział w odpowiedzi Tatu Ulmanena, użycie następującego skryptu wykona zadanie
$('input:checkbox').removeAttr('checked');
Ale, jak powiedział komentarz Blakomena , po wersji 1.6 lepiej jest użyć jQuery.prop()zamiast tego
Zauważ, że w jQuery v1.6 i nowszych, zamiast tego powinieneś używać .prop ('zaznaczone', false) dla większej kompatybilności z różnymi przeglądarkami
$('input:checkbox').prop('checked', false);
Zachowaj ostrożność podczas używania jQuery.each()go może powodować problemy z wydajnością. (również jQuery.find()w takich przypadkach unikaj . Zamiast tego użyj każdego)
$('input[type=checkbox]').each(function()
{
$(this).prop('checked', false);
});
Użyłem czegoś takiego
$(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>