チェックボックスを扱うJavaScript入門

チェックボックスを扱うスクリプト

HTMLのボディ内に、以下のように記述してみてください。

<form name="chbox">
<p>あなたの好きな動物は？（複数可）</p>
<input type="checkbox" value="イヌ">イヌ<br>
<input type="checkbox" value="ネコ">ネコ<br>
<input type="checkbox" value="ウサギ">ウサギ<br>
<input type="checkbox" value="ハムスター">ハムスター<br>
<input type="checkbox" value="熱帯魚">熱帯魚<br>
<input type="checkbox" value="他">この中には無い<br>
<input type="button" value="確認" onclick="boxCheck()">
</form>

<script>

function boxCheck(){

  //チェックされた項目を記録する変数
  var str="";
  
  //for文でチェックボックスを１つずつ確認
  for( i=0; i<6; i++ )
  {
    //チェックされているか確認する
    if( document.chbox.elements[i].checked )
    {
      //変数strが空でない時、区切りのコンマを入れる
      if( str != "" ) str=str+",";
      
      //チェックボックスのvalue値を変数strに入れる
      str=str+document.chbox.elements[i].value;
    }
  }
  
  //strが空の時、警告を出す
  if( str=="" ){
     alert( "どれか選択してください。" );
  }else{
    alert( str + "が選択されました。" );
  }
}

</script>

＜サンプル＞

チェックされているか確認する

では上記のスクリプトを見ていきましょう。 まずはフォーム部分ですが、JavaScriptで扱うときはname属性を指定するのが基本です。 ここでは「chbox」という名前を付けました。

次に関数boxCheck()を作成します。 最初に、どの項目がチェックされているかを格納する変数strを宣言します。

それから、チェックボックスを順番に確認していきます。 elements[]を使うとチェックボックスを配列として扱えるので、 for文と共に連続して確認できます。チェックボックスは６つあるので、配列の番号は0～5となります。 for文の範囲は「i<6」にしましたが、勿論「i<=5」でもOKです。

各チェックボックスがチェックされているかどうかを確かめるには、checkedを使います。 以下の形式でチェック状態を取得します。

document.form名.elements[].checked

チェックされていればtrue、されていなければfalseを取得します

if ( document.formのname名.elements[].checked ){ 処理 }

チェックされていれば、以降の処理が実行されます

チェックされている場合の処理について見ていきましょう。 チェックボックスは複数選択が可能です。 したがって変数strに格納される値は、１つでは無い可能性もあります。 それで、複数指定された時はコンマで区切ってみました。 ただし最初だけはコンマを入れると変なので、変数strの値が空の場合‘以外’にコンマを入れるようにしています。

変数strに、チェックされているチェックボックスのvalue値を格納していきます。 value値の取得は、前項のテキストボックスと同じです。 変数strに値を追加するので、str=str+…の形を取ります。

最後にalertを使って、選択されている項目を表示しています。 もしどれも選択されていけなければ変数strは空ですから、警告を出します。

さて、上記のフォームでは「犬」と「この中には無い」を選ぶことが可能です。 これでは少し具合が悪いので、 「この中には無い」を選んだら他のチェックを外すようにしてみてはどうでしょうか？ 次のページでは、チェックマークを付けたり消したりする方法について解説します。