Jak zresetować wszystkie pola wyboru za pomocą jQuery lub czystego JS?

Question 1

Jak mogę zresetować wszystkie pola wyboru w dokumencie za pomocą jQuery lub czystego JS?

Question 2

Jeśli masz na myśli, jak usunąć stan „zaznaczony” ze wszystkich pól wyboru:

$('input:checkbox').removeAttr('checked');

Question 3

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().

Question 4

Powyższa odpowiedź nie działa dla mnie -

Następujące działały

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

Dzięki temu wszystkie pola wyboru nie są zaznaczone.

Question 5

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?

Question 6

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; 
});

Question 7

Javascript

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery

$('input:checkbox').each(function() { this.checked = false; });

Aby zrobić odwrotnie, zobacz: Zaznacz wszystkie pola wyboru według identyfikatora / klasy

Question 8

 $(":checkbox:checked").each(function () {

 this.click(); 
});

do niezaznaczonego pola wyboru, obróć swoją logikę na odwrót

Question 9

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.

Question 10

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); 
});

Question 11

Użyłem czegoś takiego

$(yourSelector).find('input:checkbox').removeAttr('checked');

Question 12

<!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>

Answer 1

84

Jak mogę zresetować wszystkie pola wyboru w dokumencie za pomocą jQuery lub czystego JS?

javascript jquery checkbox Parada uliczna
źródło

Answer 2

145

Jeśli masz na myśli, jak usunąć stan „zaznaczony” ze wszystkich pól wyboru:

$('input:checkbox').removeAttr('checked');

Tatu Ulmanen
źródło

Ten skrypt przełącza stan pól wyboru. Nie jestem pewien, czy robię coś źle

Sundeep

38

Zauważ, że w jQuery v1.6 i nowszych powinieneś używać .prop ('zaznaczone', false) zamiast tego dla większej kompatybilności z różnymi

Henry C

Użyłem tego do zresetowania formularza przed otwarciem nowego okna dialogowego. Po tym muszę zaznaczyć jedno pole wyboru „zaznaczone”, a to nie działa. Kiedy patrzę na wygenerowany kod, jest on „zaznaczony”, ale na mojej stronie nie jest to $ („input: checkbox”). RemoveAttr („zaznaczone”); $ ('input [wartość =' + val + ']'). attr ('sprawdzone', prawda);

Gayane

1

To jest teraz przestarzała odpowiedź - patrz: stackoverflow.com/questions/17420534/ ...

raison

Answer 3

Ten skrypt przełącza stan pól wyboru. Nie jestem pewien, czy robię coś źle

Sundeep

Answer 4

38

Zauważ, że w jQuery v1.6 i nowszych powinieneś używać .prop ('zaznaczone', false) zamiast tego dla większej kompatybilności z różnymi

Henry C

Answer 5

Użyłem tego do zresetowania formularza przed otwarciem nowego okna dialogowego. Po tym muszę zaznaczyć jedno pole wyboru „zaznaczone”, a to nie działa. Kiedy patrzę na wygenerowany kod, jest on „zaznaczony”, ale na mojej stronie nie jest to $ („input: checkbox”). RemoveAttr („zaznaczone”); $ ('input [wartość =' + val + ']'). attr ('sprawdzone', prawda);

Gayane

Answer 6

1

To jest teraz przestarzała odpowiedź - patrz: stackoverflow.com/questions/17420534/ ...

raison

Answer 7

47

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().

Kevin Q. Yu
źródło

1

Chociaż zaakceptowana odpowiedź też działa, uważam, że jest to najlepszy sposób. Jeśli to czytasz, rozważ skorzystanie z tego sposobu, ponieważ zgodnie z najlepszą praktyką.

rafaelmorais

Answer 8

1

Chociaż zaakceptowana odpowiedź też działa, uważam, że jest to najlepszy sposób. Jeśli to czytasz, rozważ skorzystanie z tego sposobu, ponieważ zgodnie z najlepszą praktyką.

rafaelmorais

Answer 9

Powyższa odpowiedź nie działa dla mnie -

Następujące działały

$('input[type=checkbox]').each(function() 
{ 
        this.checked = false; 
});

Dzięki temu wszystkie pola wyboru nie są zaznaczone.

Answer 10

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?

Answer 11

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; 
});

Answer 12

Javascript

var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }

jQuery

$('input:checkbox').each(function() { this.checked = false; });

Aby zrobić odwrotnie, zobacz: Zaznacz wszystkie pola wyboru według identyfikatora / klasy

Answer 13

4

 $(":checkbox:checked").each(function () {

 this.click(); 
});

do niezaznaczonego pola wyboru, obróć swoją logikę na odwrót

Yene Mulatu
źródło

Answer 14

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.

Answer 15

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); 
});

Answer 16

1

Użyłem czegoś takiego

$(yourSelector).find('input:checkbox').removeAttr('checked');

Andrej Gaspar
źródło

Answer 17

<!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>

Answer 18

3

Tylko kod odpowiedzi są odradzane. Naprawdę chcesz zawrzeć kilka wyjaśnień.

GhostCat,

Jak zresetować wszystkie pola wyboru za pomocą jQuery lub czystego JS?

Odpowiedzi:

Javascript

jQuery