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

  1. HOME
  2. JavaScript入門
  3. チェックボックスを扱う

このページでは、チェックボックスを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文でチェックボックスを1つずつ確認
  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文と共に連続して確認できます。チェックボックスは6つあるので、配列の番号は0~5となります。 for文の範囲は「i<6」にしましたが、勿論「i<=5」でもOKです。

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

document.form名.elements[].checked
チェックされていればtrue、されていなければfalseを取得します
if文と組み合わせることによって、チェックされているか確認できます。

if ( document.formのname名.elements[].checked ){ 処理 }
チェックされていれば、以降の処理が実行されます

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

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

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

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

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers