JavaScriptでチェックボックスのチェックをON・OFFする方法について解説。

HOME
更新日:2017.03.02
HOMEJavaScript入門 > チェックのON/OFF

チェックのON/OFF

前回はチェックボックスがチェックされているかどうかを確かめる方法について見ました。 このページではJavaScriptでチェックを付けたり消したりする方法について考えます。

JavaScriptでチェックをON・OFFする

ここでは、前のページで見たHTMLのフォームを利用していきます。 ではJavaScriptの部分に、以下の関数を書き足してみてください。

function noch(){
  //「この中には無い」がチェックされているか確認
  if( document.chbox.elements[5].checked )
  {
    //チェックされていたら、他の項目のチェックを外す
    for( i=0 ; i<5 ; i++)
    {
      document.chbox.elements[i].checked=false;
    }
  }
}

そして、関数boxCheck()の先頭で、今書いた関数noch()を呼び出すようにします。

function boxCheck(){

  noch();

  var str="";
  
  for(i=0;i<6;i++)
  {
    if(document.chbox.elements[i].checked)
    {
      if(str != "") str=str+",";
      str=str+document.chbox.elements[i].value;
    }
  }

  if(str==""){
     alert("どれか選択してください。");
  }else{
    alert(str+"が選択されました。");
  }
}

これで「この中には無い」がチェックされていたら、 他の項目のチェックを外すようにすることができます。 その後で各項目がチェックされているか確認することになります。

<サンプル>

あなたの好きな動物は?(複数可)

イヌ
ネコ
ウサギ
ハムスター
熱帯魚
この中には無い

JavaScriptコードの説明

では上記コードについて見ていきましょう。 関数noch()を宣言し、最初にif文を使って「この中には無い」 がチェックされているかどうか確認しています。 「この中に無い」チェックボックスはフォームの中で6番目の要素です。 従ってelements[]の大括弧内は5(配列は0から数える)となります。

もしチェックされていたら、他の項目のチェックを消していきます。 for文を使って、1から5番目までの項目のチェックを連続して消します。 iの範囲は0~4となります。

次にこのページの要点にあたる、チェックマークの操作です。 チェックボックスのチェックを付けたり消したりするには、以下のように記述します。

document.form名.elements[].checked = true/false
trueならチェックを付け、falseなら消します。

最後に、関数boxCheck()の冒頭で関数noch()を呼び出します。 関数の中で他の関数を呼び出すのは初出かも知れませんが、このようなことも可能です。

ちなみに、チェック項目「この中には無い」を選択した瞬間に他の項目を消したい場合は、 onchangeイベントで関数noch()を呼び出すとよいでしょう。

<input type="checkbox" value="他" onchange="noch()">この中には無い<br>

次のページでは、ラジオボタンの操作について考えます。 基本的にチェックボックス操作は同じです。 でもそれではつまらないと思うので、ラジオボタンを使った3択クイズを作ってみたいと思います。