web-dev-qa-db-ja.com

jQueryまたは純粋なJSを使用してすべてのチェックボックスをリセットするにはどうすればよいですか？

JQueryまたは純粋なJSを使用してドキュメント内のすべてのチェックボックスをリセットするにはどうすればよいですか？

javascriptjquerycheckbox
75
streetparade

すべてのチェックボックスから「チェック済み」状態を削除する方法を意味する場合：

$('input:checkbox').removeAttr('checked');
138
Tatu Ulmanen

フォームのリセット機能を使用する場合は、これを使用することをお勧めします。

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

OR

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

removeAttr()はform.reset()でリセットできないようです。

38
Kevin Q. Yu

上記の答えは私にはうまくいきませんでした-

以下が働いた

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

これにより、すべてのチェックボックスがオフになります。

13
Sundeep

以前にこれを使用しました：

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

.attrと.removeAttrは状況によっては機能しないようです。

編集：jQuery v1.6以降では、ブラウザ間の互換性を高めるために代わりに.prop（ 'checked'、false）を使用する必要があることに注意してください-api.jquery.com/propを参照してください

ここにコメント： jQueryまたはpure JSを使用してすべてのチェックボックスをリセットする方法

9
jef

場合によっては、デフォルトでチェックボックスが選択されていることがあります。未選択として設定するのではなく、デフォルトの選択を復元する場合は、defaultCheckedプロパティを比較します。

$(':checkbox').each(function(i,item){ 
        this.checked = item.defaultChecked; 
});
8
Dean Burge
 $(":checkbox:checked").each(function () {

 this.click(); 
});

チェックされていないチェックボックスに、ロジックを逆にして

4
Yene Mulatu

ページのどのdivまたは一部にチェックボックスをオンにするか、オフにするかを選択できます。ページに2つのフォームがあり、1つには値が事前に入力され（更新用）、もう1つは新しく入力する必要があるというシナリオに遭遇しました。

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

これにより、IDがnewFormIdのフォームのチェックボックスのみがオフになります。

3
kavinder

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

逆を行うには、以下を参照してください。 ID /クラスによるすべてのチェックボックスの選択

3
kenorb

Tatu Ulmanen's answer で述べたように、フォロースクリプトを使用するとジョブが実行されます

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

しかし、 Blakomenのコメント が述べたように、バージョン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); 
});
2
Michel Ayres

私はそのようなものを使用しました

$(yourSelector).find('input:checkbox').removeAttr('checked');
1
Andrej BlackFlash
<!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>
1
ankush