指定したチェックボックスを一斉に選択する方法

質問

こんにちは
http://oshiete1.goo.ne.jp/kotaeru.php3?q=384409
で質問されていた内容と全く同じですが、恥ずかしながらも回答が私には理解できなかったので、易しく教えて下さいませんでしょうか？

フォームのチェックボックスに駅名を入れていますが、何百件もの数になるので、自動にチェックをいれたいのです。

<INPUT TYPE="CHECKBOX" NAME="eki" VALUE="新今宮">新今宮
<INPUT TYPE="CHECKBOX" NAME="eki" VALUE="天王寺">天王寺
<INPUT TYPE="CHECKBOX" NAME="eki" VALUE="心斎橋">心斎橋
<INPUT TYPE="CHECKBOX" NAME="eki" VALUE="難波">難波

こんな感じで何百件も記述しています。

環状線全チェックをクリックしたら、環状線のみ一括選択
御堂筋線全チェックをクリックしたら御堂筋線のみ一括選択

という風にしたいです。
うまく伝わりましたでしょうか？
宜しくお願いします。

回答No.2

yambejp · ベストアンサー

以前の回答にけちをつけるわけではないですが
複数のタグに同じnameを振るのはいささか
使い勝手がわるいようなきがします。
共通の属性を持たせたい場合はclassが便利です。

<script language="javascript">
function classCheck(f,cn,flag){
for (var i=0;i<f.elements.length;i++){
if(f.elements[i].className==cn){f.elements[i].checked=flag}
}
}
</script>
<form>
<input type="checkbox" name="retasu" value="1" class="yasai">レタス<br>
<input type="checkbox" name="kyuri" value="1" class="yasai">きゅうり<br>
<input type="checkbox" name="ninjin" value="1" class="yasai">にんじん<br>
<input type="checkbox" name="ringo" value="1" class="fruit">りんご<br>
<input type="checkbox" name="mikan" value="1" class="fruit">みかん<br>
<input type="checkbox" name="budou" value="1" class="fruit">ぶどう<br>
<input type="button" value="野菜チェック" onClick="classCheck(this.form,'yasai',true)">
<input type="button" value="果物チェック" onClick="classCheck(this.form,'fruit',true)">
<input type="button" value="野菜チェックはずす" onClick="classCheck(this.form,'yasai',false)">
<input type="button" value="果物チェックはずす" onClick="classCheck(this.form,'fruit',false)">
<form>
</body>
</html>

お礼

有難うございます！
おかげで、思ってたとおりの結果になりました！
しかも、初心者の私にも大変分かりやすい説明で、無事できました！

回答No.1

BLUEPIXY

参照ＵＲＬは、同一の名前のチェックボックスにチェックを付ける（getElementsByNameで同一の名前のフォームのコレクション（リスト）を得てそれをチェックを付ける処理をしている）処理をしています。
なので、例えば、
環状線全チェックのチェックボックスと同じ名前のチェックボックスを環状線のそれぞれの駅のフォームの名前につけてやれば、良いです。

お礼

早速の回答有難うございました！
なるほど、そういう処理をしていたのですね。。。
参考になりました！