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


回答:


145

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

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

このスクリプトは、チェックボックスの状態を切り替えています。私が何か間違ったことをしているのかわからない
2011年

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

これを使用して、新しいダイアログを開く前にフォームをリセットしました。この後、1つのチェックボックスを「チェック」する必要がありますが、これは機能しません。生成されたコードを見ると、「チェック済み」ですが、私のページでは$( 'input:checkbox')。removeAttr( 'checked');ではありません。$( 'input [value =' + val + ']')。attr( 'checked'、true);
ガヤネ2013年

1
これは現在廃止された回答です-参照:stackoverflow.com/questions/17420534/…–
存在理由

47

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

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

または

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

以下のように見えるremoveAttr()ことでリセットすることはできませんform.reset()


1
受け入れられた答えも機能しますが、これが最善の方法だと思います。これを読んでいる場合は、ベストプラクティスとして、この方法の使用を検討してください。
rafaelmorais

13

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

以下が機能しました

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

これにより、すべてのチェックボックスがオフになっていることを確認します。


11

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

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

11

私は以前にこれを使用しました:

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

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

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

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



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

 this.click(); 
});

チェックボックスをオフにするには、ロジックを逆にして反対の操作を行います


3

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

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

これにより、IDがnewFormIdのチェックボックスがオフになっているフォームのチェックボックスのみが作成されます。


2

Tatu Ulmanenの回答で述べたように、次のスクリプトを使用すると機能します

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


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

3
コードのみの回答はお勧めしません。あなたは本当にいくつかの説明を含めたいです。
GhostCat 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.