複数のチェックボックスを同時にチェックする 全選択チェックボックス
複数のチェックボックスを同時に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を使用する方法
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法
- 表示、非表示を切り替える方法
スポンサーリンク
