Как сбросить все флажки с помощью jQuery или чистого JS?

Question 1

Как сбросить все флажки в документе с помощью jQuery или чистого JS?

Question 2

Если вы имеете в виду, как убрать отмеченное состояние со всех флажков:

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

Question 3

Если вы хотите использовать функцию сброса формы, вам лучше использовать это:

$('input[type=checkbox]').prop('checked',true);

ИЛИ ЖЕ

$('input[type=checkbox]').prop('checked',false);

Похоже removeAttr()нельзя сбросить с помощью form.reset().

Question 4

Приведенный выше ответ не сработал для меня -

Следующие работали

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

Это гарантирует, что все флажки сняты.

Question 5

Я использовал это раньше:

$('input[type=checkbox]').prop('checked', false);

кажется, что .attr и .removeAttr не работают в некоторых ситуациях.

изменить: обратите внимание, что в jQuery v1.6 и выше вы должны использовать .prop('checked', false)вместо этого для большей кросс-браузерной совместимости - см. https://api.jquery.com/prop

Комментарий здесь: Как сбросить все флажки с помощью jQuery или чистого JS?

Question 6

В некоторых случаях флажок может быть установлен по умолчанию. Если вы хотите восстановить выбор по умолчанию, а не устанавливать его как невыделенный, сравните defaultCheckedсвойство.

$(':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; });

Чтобы сделать обратное, см .: Выбрать все флажки по идентификатору / классу

Question 8

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

 this.click(); 
});

чтобы снять флажок, поверните свою логику, чтобы сделать противоположное

Question 9

Вы можете выбрать, в каком блоке или части вашей страницы можно установить флажки, а в каких - нет. Я столкнулся со сценарием, когда у меня есть две формы на моей странице, одна из которых имеет предварительно заполненные значения (для обновления), а другая должна быть заполнена заново.

$('#newFormId input[type=checkbox]').attr('checked',false);

это сделает только флажки в форме с идентификатором newFormId как не отмеченный.

Question 10

Как сказано в ответе Тату Улманен, использование следующего скрипта выполнит эту работу.

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

Но, как сказано в комментарии Блакомена , после версии 1.6 jQuery.prop()вместо этого лучше использовать

Обратите внимание, что в jQuery v1.6 и выше вы должны использовать вместо этого .prop ('checked', false) для большей кросс-браузерной совместимости.

$('input:checkbox').prop('checked', false);

Будьте осторожны при использовании, jQuery.each()это может вызвать проблемы с производительностью. (также избегайте jQuery.find()в этом случае. Используйте вместо этого каждый)

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

Question 11

Я использовал что-то подобное

$(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

86

Как сбросить все флажки в документе с помощью jQuery или чистого JS?

javascript jquery checkbox уличный парад
источник

Answer 2

147

Если вы имеете в виду, как убрать отмеченное состояние со всех флажков:

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

Тату Улманен
источник

Этот сценарий переключает состояние флажков. Не уверен, что я делаю что-то не так

Sundeep

39

Обратите внимание, что в jQuery v1.6 и выше вы должны использовать .prop ('checked', false) вместо этого для большей кросс-браузерной совместимости - см. Api.jquery.com/prop

Henry C

Я использовал это для сброса формы перед открытием нового диалога. После этого мне нужно поставить один флажок «установлен», и это не сработает. Когда я смотрю на сгенерированный код, он «отмечен», но на моей странице это не $ ('input: checkbox'). RemoveAttr ('checked'); $ ('input [значение =' + val + ']'). attr ('проверено', истина);

Гаянэ,

1

Теперь это устаревший ответ - см .: stackoverflow.com/questions/17420534/…

raison

Answer 3

Этот сценарий переключает состояние флажков. Не уверен, что я делаю что-то не так

Sundeep

Answer 4

39

Обратите внимание, что в jQuery v1.6 и выше вы должны использовать .prop ('checked', false) вместо этого для большей кросс-браузерной совместимости - см. Api.jquery.com/prop

Henry C

Answer 5

Я использовал это для сброса формы перед открытием нового диалога. После этого мне нужно поставить один флажок «установлен», и это не сработает. Когда я смотрю на сгенерированный код, он «отмечен», но на моей странице это не $ ('input: checkbox'). RemoveAttr ('checked'); $ ('input [значение =' + val + ']'). attr ('проверено', истина);

Гаянэ,

Answer 6

1

Теперь это устаревший ответ - см .: stackoverflow.com/questions/17420534/…

raison

Answer 7

47

Если вы хотите использовать функцию сброса формы, вам лучше использовать это:

$('input[type=checkbox]').prop('checked',true);

ИЛИ ЖЕ

$('input[type=checkbox]').prop('checked',false);

Похоже removeAttr()нельзя сбросить с помощью form.reset().

Кевин К. Ю.
источник

1

Хотя принятый ответ тоже работает, я считаю, что это лучший способ сделать это. Пожалуйста, если вы читаете это, подумайте об использовании этого способа, так как это лучше всего.

rafaelmorais

Answer 8

1

Хотя принятый ответ тоже работает, я считаю, что это лучший способ сделать это. Пожалуйста, если вы читаете это, подумайте об использовании этого способа, так как это лучше всего.

rafaelmorais

Answer 9

Приведенный выше ответ не сработал для меня -

Следующие работали

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

Это гарантирует, что все флажки сняты.

Answer 10

Я использовал это раньше:

$('input[type=checkbox]').prop('checked', false);

кажется, что .attr и .removeAttr не работают в некоторых ситуациях.

изменить: обратите внимание, что в jQuery v1.6 и выше вы должны использовать .prop('checked', false)вместо этого для большей кросс-браузерной совместимости - см. https://api.jquery.com/prop

Комментарий здесь: Как сбросить все флажки с помощью jQuery или чистого JS?

Answer 11

В некоторых случаях флажок может быть установлен по умолчанию. Если вы хотите восстановить выбор по умолчанию, а не устанавливать его как невыделенный, сравните defaultCheckedсвойство.

$(':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; });

Чтобы сделать обратное, см .: Выбрать все флажки по идентификатору / классу

Answer 13

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

 this.click(); 
});

чтобы снять флажок, поверните свою логику, чтобы сделать противоположное

Answer 14

Вы можете выбрать, в каком блоке или части вашей страницы можно установить флажки, а в каких - нет. Я столкнулся со сценарием, когда у меня есть две формы на моей странице, одна из которых имеет предварительно заполненные значения (для обновления), а другая должна быть заполнена заново.

$('#newFormId input[type=checkbox]').attr('checked',false);

это сделает только флажки в форме с идентификатором newFormId как не отмеченный.

Answer 15

Как сказано в ответе Тату Улманен, использование следующего скрипта выполнит эту работу.

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

Но, как сказано в комментарии Блакомена , после версии 1.6 jQuery.prop()вместо этого лучше использовать

Обратите внимание, что в jQuery v1.6 и выше вы должны использовать вместо этого .prop ('checked', false) для большей кросс-браузерной совместимости.

$('input:checkbox').prop('checked', false);

Будьте осторожны при использовании, jQuery.each()это может вызвать проблемы с производительностью. (также избегайте jQuery.find()в этом случае. Используйте вместо этого каждый)

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

Answer 16

1

Я использовал что-то подобное

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

Андрей Гаспар
источник

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

Ответы только на код не приветствуются. Вы действительно хотите включить некоторые объяснения.

GhostCat 05

Как сбросить все флажки с помощью jQuery или чистого JS?

Ответы:

Javascript

jQuery