複数のチェックボックスを同時にチェックする 全選択チェックボックス

複数のチェックボックスを同時に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;

スポンサーリンク

関連記事

スポンサーリンク

基本的な特徴

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る