jQueryまたは純粋なJSを使用してドキュメント内のすべてのチェックボックスをリセットするにはどうすればよいですか?
回答:
すべてのチェックボックスから「チェック済み」状態を削除する方法を意味する場合:
$('input:checkbox').removeAttr('checked');
フォームのリセット機能を使用する場合は、次の方法を使用することをお勧めします。
$('input[type=checkbox]').prop('checked',true);
または
$('input[type=checkbox]').prop('checked',false);
以下のように見えるremoveAttr()
ことでリセットすることはできませんform.reset()
。
私は以前にこれを使用しました:
$('input[type=checkbox]').prop('checked', false);
.attrと.removeAttrは状況によっては機能しないようです。
編集:jQuery v1.6以降では、.prop('checked', false)
ブラウザー間の互換性を高めるために代わりに使用する必要があることに注意してください-https://api.jquery.com/propを参照してください
var clist = document.getElementsByTagName("input");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; }
$('input:checkbox').each(function() { this.checked = false; });
反対の操作を行うには、次を参照してください:ID /クラスですべてのチェックボックスを選択
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);
});
私はそのようなものを使用しました
$(yourSelector).find('input:checkbox').removeAttr('checked');
<!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>