複数のチェックボックスを同時にチェックする 全選択チェックボックス
複数のチェックボックスを同時にON/OFFする方法です。
チェックされるチェックボックスのname属性がそれぞれ違う場合
チェックされるチェックボックスのname属性が値指定の配列の場合
チェックされるチェックボックスのname属性が全て同じ場合
チェックされるチェックボックスのname属性が空配列の場合
サンプル
チェックされるチェックボックスのname属性がそれぞれ違う場合
<form name="form" method="GET"> <input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択 <input type="checkbox" name="bbb1" /> <input type="checkbox" name="bbb2" /> <input type="checkbox" name="bbb3" /> </form> <script language="JavaScript" type="text/javascript"> <!-- function AllChecked(){ var check = document.form.aaa.checked; document.form.elements['bbb1'].checked = check; document.form.elements['bbb2'].checked = check; document.form.elements['bbb3'].checked = check; } //--> </script>
チェックされるチェックボックスのname属性が値指定の配列の場合
<form name="form" method="GET"> <input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択 <input type="checkbox" name="bbb[0]" /> <input type="checkbox" name="bbb[1]" /> <input type="checkbox" name="bbb[2]" /> </form> <script language="JavaScript" type="text/javascript"> <!-- function AllChecked(){ var check = document.form.aaa.checked; document.form.elements['bbb[0]'].checked = check; document.form.elements['bbb[1]'].checked = check; document.form.elements['bbb[2]'].checked = check; } //--> </script>
チェックされるチェックボックスのname属性が全て同じ場合
<form name="form" method="GET"> <input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択 <input type="checkbox" name="bbb" /> <input type="checkbox" name="bbb" /> <input type="checkbox" name="bbb" /> </form> <script language="JavaScript" type="text/javascript"> <!-- function AllChecked(){ var check = document.form.aaa.checked; for (var i=0; i<document.form.bbb.length; i++){ document.form.bbb[i].checked = check; } } //--> </script>
ループしない場合は
document.form.bbb[0].checked = check; document.form.bbb[1].checked = check; document.form.bbb[2].checked = check;
チェックされるチェックボックスのname属性が空配列の場合
<form name="form" method="GET"> <input type="checkbox" name="aaa" onClick="AllChecked();" /> 全選択 <input type="checkbox" name="bbb[]" /> <input type="checkbox" name="bbb[]" /> <input type="checkbox" name="bbb[]" /> </form> <script language="JavaScript" type="text/javascript"> <!-- function AllChecked(){ var check = document.form.aaa.checked; for (var i=0; i<document.form.elements['bbb[]'].length; i++){ document.form.elements['bbb[]'][i].checked = check; } } //--> </script>
ループしない場合は
document.form.elements['bbb[]'][0].checked = check; document.form.elements['bbb[]'][1].checked = check; document.form.elements['bbb[]'][2].checked = check;
関連記事
- JavaScriptで64bit版か32bit版の判別をする方法
- 経過時間、残り時間をリアルタイムに表示する方法
- 時間をHH:ii:ssのフォーマットで表示する方法
- ゼロ埋めする方法 printfの代替
- ページのタイトルを変更する titleタグ
- リンクを別ウインドウで開きながら、元のウインドウのページを遷移させる方法
- Aタグのtarget属性をJavaScriptで指定する方法
- ページを移動するときに警告を出す方法
- IE6でmin-width、max-width、min-height、max-heightを使用する方法
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法
- 表示、非表示を切り替える方法
スポンサーリンク