Як скинути всі прапорці за допомогою 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

Ви можете обрати вибір, який div або частина вашої сторінки можуть мати прапорці, а які ні. Я натрапив на сценарій, коли на моїй сторінці є дві форми, а одна має попередньо заповнені значення (для оновлення), а інші потрібно заповнити свіжо.

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

це зробить лише прапорці у формі з ідентифікатором newFormId як не встановленим.

Question 10

Як сказано у відповіді Тату Улманен, використання наступного сценарію зробить свою роботу

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

Але, як зазначав коментар Блакомена , після версії 1.6 краще використовувати jQuery.prop()замість цього

Зверніть увагу, що в jQuery v1.6 та новіших версіях, замість цього вам слід використовувати .prop ('перевірено', 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>