チェックのON/OFFJavaScript入門

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文を使って、１から５番目までの項目のチェックを連続して消します。 iの範囲は0～4となります。

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

document.form名.elements[].checked = true/false

trueならチェックを付け、falseなら消します。

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

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

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

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