100個のチェックボックスの任意区間を一括チェックしたい[JavaScript]

質問

百人一首を覚えるCGIの設定フォームを作ってます。
100個のチェックボックスを作ったのですが、それだと任意区間（例えば23番～55番の歌）を出題したい場合にチェック作業が多くなります。
そこで任意の連続した番号のスタートの番号とエンドの番号をチェックしたらその区間をJavaScriptで一括チェックできるように各100個ずつのチェックボックス（もしくはラジオ）を用意したいです。
どのようなスクリプトを用意すれば一括チェックできるようになりますか？
ちなみにチェックボックスは現在
<input type="checkbox" name="number94" value="1">
のようになっています。idはついていません。
どうぞよろしくお願いいたします。

回答No.2

wp_ · ベストアンサー

当方がやるなら以下の感じですかね。
入力された値が妥当な数字であるか、などのチェック機構は必要ですがそこは端折ります。
idがないとjavascriptで扱うのは難しいので適当につけると良いです。

<input type="button" value="go" onclick="on()" />
<input type="checkbox" name="number1" id="number1" />1
<input type="checkbox" name="number2" id="number2" />2
<input type="checkbox" name="number3" id="number3" />3
...

<script type='text/javascript'><!--
function on()
{
　begin = prompt('開始位置','');
　end = prompt('終了位置','');
　for(ii=begin;ii<=end;ii++)
　{
　　document.getElementById('number' + ii).checked = true;
　}
}

お礼

No.4さんのフォローで正常に動きました。ありがとうございました！

補足

ありがとうございます。試してみました。
私が当初考えていた操作とは違うのですが、チェックボックスを増やさなくて済むので
非常に見た目がコンパクトで操作しやすいですね。
逆に自分の考えよりも使い勝手がいいと感じました。

現在1つ問題点があります。
ケタが違う区間を指定した場合うまく動きません。
例えば4→7,35→45は動作しますが、4→14,45→100では動きません。
例外的に最初が1だとケタが違っても動くようです。

他のスクリプト（上の句,下の句を一括チェックするスクリプトを入れてあります）
を削除しても現象が起きるので干渉している訳ではないと思うのですが。
どうなんでしょうか？

回答No.4

Dumper

#2さんの関数をちょっとだけいじりました

function on()
{
　begin = parseInt( prompt('開始位置','') );
　end = parseInt( prompt('終了位置','') );

　for( ii=Math.min(begin, end); ii<=Math.max(begin, end); ii++)
　{
　　document.getElementById('number' + ii).checked = true;
　}
}

お礼

ありがとうございました。
正常に動きました。助かりました！

回答No.3

da-te

こんばんは。

動的に処理させてみました。

チェックを付けたボックス間を全てチェックさせます。
<input type="checkbox" name="number94" value="1" onClick="calc( this );">
<input type="checkbox" name="number95" value="1" onClick="calc( this );">
<input type="checkbox" name="number96" value="1" onClick="calc( this );">
<input type="checkbox" name="number97" value="1" onClick="calc( this );">
<input type="checkbox" name="number98" value="1" onClick="calc( this );">
<input type="checkbox" name="number99" value="1" onClick="calc( this );">
：
：

<script language="javascript"><!--
// チェックされているボックスの数
var checkBoxCount = 0;
// チェック開始位置
var num_start = 0;
// チェック終了位置
var num_end = 0;
// name区の共通文字列
var name_str = "number";

// チェックボックスのname区の数字を取得
// obj:クリックしたボックスのエレメント
function calc( obj ){
// チェックを付けた時
if( obj.checked == true ){
// チェック開始位置
if( checkBoxCount == 0 ){
num_start = obj.name.substring( name_str.length );
// チェック終了位置
}else if( checkBoxCount == 1 ){
num_end = obj.name.substring( name_str.length );
// チェック開始位置の数字　＜　チェック終了位置の数字にする
if( num_start > num_end ){
var tmp = num_start;
num_start = num_end;
num_end = tmp;
}
// チェック開始位置からチェック終了位置までのチェックボックスにチェックを付ける
checking( num_start, num_end );
}
checkBoxCount++;
// チェックを外した時
}else{
checkBoxCount--;
}
window.status=checkBoxCount;
}
// チェック開始位置からチェック終了位置までのチェックボックスにチェックを付ける
// num_s;チェック開始位置
// num_e:チェック終了位置
function checking( num_s, num_e ){
// 既にチェックが付いているボックスは処理しない
while( num_s < num_e - 1 ){
num_s++;
document.getElementsByName( name_str + num_s )[0].checked = true;
checkBoxCount++;
}
}
//-->
</script>

ちょっと長めのコードですが、こんな感じでいかがでしょうか。

お礼

ありがとうございました。試してみました。

私の考えていたものにかなり近くて感動しました。
ただNo.2の方のやり方がキーボードに数字を打ち込むめんどくささはあるものの、
見た目のシンプルさ、スクリプトを再実行できる点から
No.2の方のスクリプトを実装することになると思います。
せっかく力作を教授いただいたのに大変申し訳ありません。

あとNo.2の方と同じでケタが違う区間はうまく動いてくれませんでした…。

回答No.1

神崎 渉瑠（@taloo）

idは
<label for="number1"><input>チェックボックス１</label>
でも使えるので、nameとは別につけておいた方が良いと思います。
（クリックできる範囲が広がるだけですが）

nameが同じなら
これで23から55はチェックをつけ、それ以外は全てチェックを外せます。

<input type="checkbox" name="number94" id="number1" value="1">
<input type="checkbox" name="number94" id="number2" value="2">
<input type="checkbox" name="number94" id="number3" value="3">

<script>
var nums=document.getElementsByName('number94');
for(var i=0;i<nums.length;i++){
nums[i].checked=(23<=i && i<=55);
}
</script>

補足

早速の教授ありがとうございます。

残念ながらnameにはそれぞれの歌の番号を入れないといけないです。
というのもvalueは
0がチェック選択しない
1がチェック選択したが未出題
2がチェック選択して既出題
を意味します。

チェックした歌のvalueは最初は未出題なので1で、出題されると2に変更されます。
チェックした歌全てのvalueが1でなくなる(未出題の歌がなくなる)と
出題終了→2を全て1に戻す→同設定で再出題しますか？→また出題してvalueを2に変更する
という流れになっています。

もちろんCGI側でうまく処理すればできなくはないですが複雑になると思うので、
できればnameとvalueは変えずidだけをうまく使ったスクリプトを探しています。
説明不足でお手数をおかけして申し訳ありません。