JavaScript集（フォームのチェックボックスを同時にチェックさせる）

■フォームのチェックボックスを同時にチェックさせる　[確認ブラウザ：NN4.75　IE6.0]
フォームのチェックボックスを同時にチェックさせるJavaScriptです。

これは、連続してチェックボックスをチェックさせる場合に、プルダウンメニューから選択した間のものを全て同時にチェックさせてしまいます。
アンケート等でチェックボタンの制御をしたい時などに役に立つと思います。

下は例えば睡眠時間の寝た時間と起きた時間を選択して、「Click」ボタンをクリックしてみてください。

睡眠時間　 〜　 　　 　　

00:00〜00:30
00:30〜01:00
01:00〜01:30
01:30〜02:00
02:00〜02:30
02:30〜03:00
03:00〜03:30
03:30〜04:00
04:00〜04:30
04:30〜05:00

上記のJavascriptの書き方は以下のようになります。

<HTML>
<HEAD>
<script language="JavaScript">

function auto_check(){
  var num1,value1,num2,value2;
  var check_value = new Array(48);
  var time_flag=0;
  var for_counter=0;

  num1=document.enq.sleep_start.selectedIndex;
  value1=document.enq.sleep_start[num1].value;
  num2=document.enq.sleep_end.selectedIndex;
  value2=document.enq.sleep_end[num2].value;

time_flag = value2 - value1;
for_counter = (value1 - 0) + time_flag; //数値扱いにするため、一度「-0」をする

for(i=value1; i < for_counter; i++){
  check_value[i] = 1;
}

  if(check_value[0] == 1){
    document.enq.sleep0.checked=true;
  }
  if(check_value[1] == 1){
    document.enq.sleep1.checked=true;
  }
  if(check_value[2] == 1){
    document.enq.sleep2.checked=true;
  }
  if(check_value[3] == 1){
    document.enq.sleep3.checked=true;
  }
  if(check_value[4] == 1){
    document.enq.sleep4.checked=true;
  }
  if(check_value[5] == 1){
    document.enq.sleep5.checked=true;
  }
  if(check_value[6] == 1){
    document.enq.sleep6.checked=true;
  }
  if(check_value[7] == 1){
    document.enq.sleep7.checked=true;
  }
  if(check_value[8] == 1){
    document.enq.sleep8.checked=true;
  }
  if(check_value[9] == 1){
    document.enq.sleep9.checked=true;
  }

}

</script>
</head>
<body>
<FORM NAME="enq">
睡眠時間　<select name="sleep_start">
<option value="0">0:00
<option value="1">0:30
<option value="2">1:00
<option value="3">1:30
<option value="4">2:00
<option value="5">2:30
<option value="6">3:00
<option value="7">3:30
<option value="8">4:00
<option value="9">4:30
<option value="10">5:00
</select>
〜　<select name="sleep_end">
<option value="0">0:00
<option value="1">0:30
<option value="2">1:00
<option value="3">1:30
<option value="4">2:00
<option value="5">2:30
<option value="6">3:00
<option value="7">3:30
<option value="8">4:00
<option value="9">4:30
<option value="10">5:00
</select>
　　<input type="button" value="CLICK!" onClick="auto_check();">
　　<input type="reset" value="CLEAR" onClick="auto_check();">
<BR>
00:00〜00:30<input type="checkbox" name="sleep0"><BR>
00:30〜01:00<input type="checkbox" name="sleep1"><BR>
01:00〜01:30<input type="checkbox" name="sleep2"><BR>
01:30〜02:00<input type="checkbox" name="sleep3"><BR>
02:00〜02:30<input type="checkbox" name="sleep4"><BR>
02:30〜03:00<input type="checkbox" name="sleep5"><BR>
03:00〜03:30<input type="checkbox" name="sleep6"><BR>
03:30〜04:00<input type="checkbox" name="sleep7"><BR>
04:00〜04:30<input type="checkbox" name="sleep8"><BR>
04:30〜05:00<input type="checkbox" name="sleep9"><BR>
</form>

</body>
</html>


WWW トップページへ戻る