チェックボックスの一括選択。一括選択削除

解決済

質問者：masa_to
質問日時：2006/11/28 12:33
回答数：3件

質問させてください。
大分類の項目が３つ、１つの大分類に対しての小分類の項目が５つあり、それぞれの項目にチェックボックスをつけています。
↓□がチェックボックスだとします。
□大分類１　　　□小分類１－１　□小分類１－２　・・・小分類１－５

□大分類２　　　□小分類２－１　□小分類２－２　・・・小分類２－５

□大分類３　　　□小分類３－１　□小分類３－２　・・・小分類３－５

上記のようなフォームをつくり、大分類１のチェックボックスにチェックを入れると、小分類１－１　から　小分類１－５まで自動でチェックが入るスクリプトを作りたいのですが。。。

たとえば、大分類１をチェックしたとき用のファンクション、大分類２をチェックしたとき用のファンクション、大分類３をチェックしたとき用のファンクション。。。と、ファンクションを分ければうまくいくのですが、引数（？）配列（？）を使用して、ひとつのファンクションにまとめれないものでしょうか。。。
ちなみに、スクリプトは以下の通りです。
var count;
function BoxChecked(){
if (document.kisyu.x.checked == true){
for(count = 0; count < document.kisyu.ck.length; count++){
document.kisyu.ck[count].checked = true;
}
}
else{
for(count = 0; count < document.kisyu.ck.length; count++){
document.kisyu.ck[count].checked = false;
}
}
}

上記スクリプト内の「x」が大分類のチェックボックス、「ck」が小分類のチェックボックスとなっています。
色々試したのですがうまくいかず。。。
どなたかご教授願います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2006/11/28 15:34

bxが親でsxが子という名前で確定しているなら以下のようにしてください

ちなみにinputは最低限formの入れ子にしてください

<script language=javascript>
function allCheck(obj){
f=obj.form
num=obj.name.replace("b","")
for(var i=0;i<f.length;i++){
if(f[i].name=="s"+num) f[i].checked=obj.checked;
}
}
</script>
<form>
<table border="0">
<tr>
<td rowspan="4" class="color_1"><input type="checkbox" name="b1" onClick="allCheck(this)">果物</td>
<td class="color_1"><input type="checkbox" name="s1">りんご</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">バナナ</td>
</tr>
<tr>
<td class="color_1"><input type="checkbox" name="s1">もも</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">なし</td>
</tr>
<tr>
<td rowspan="3" class="color_1"><input type="checkbox" name="b2" onClick="allCheck(this)">野菜</td>
<td class="color_1"><input type="checkbox" name="s2">きゅうり</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">トマト</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">キャベツ</td>
</tr>
</table>
</form>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
まさに、望むとおりの動きができました！！
本当にありがとうございました！！

まだまだJavaScript初心者なもので、仕組みがよくわからないのでいただいたソースを解析して勉強したいと思います。

本当にありがとうございました！！

通報する

お礼日時：2006/11/28 18:59

No.2

回答者： steel_gray
回答日時：2006/11/28 14:20

大分類と小分類に親子関係を持たせて入れ子になっていれば出来ます。

サンプル）…分かりやくfieldsetを使いましたが単なるdivとかでも可能です。（その場合は親子を括るタグにはclassを付ける等して親だと判定できるようにする必要がありますが。）

<html>
<head>
<title>test</title>
<script type="text/javascript">

</script>
</head>
<body>
<fieldset><legend><input type="checkbox" onclick="allchk(this)">大分類１</legend>
<input type="checkbox">小分類１－１
<input type="checkbox">小分類１－２
<input type="checkbox">小分類１－３
</fieldset>
<fieldset><legend><input type="checkbox" onclick="allchk(this)">大分類２</legend>
<input type="checkbox">小分類２－１
<input type="checkbox">小分類２－２
</fieldset>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
ご教授いただいた方法で、思い通りの動きをしてくれました。
ありがとうございました。

そこでまた問題が発生したのですが。。。
テーブルを組むと、fieldsetは使えないのでしょうか。。。

<table>
<tr><fieldset><legend>
<td rowspan="3"><input type="checkbox">大分類1</legend></td>
<td><input type="checkbox">小分類1-1</td>
</tr>
<tr>
<td><input type="checkbox">小分類1-2</td>
</tr>
<tr>
<td><input type="checkbox">小分類1-3</td>
</fieldset></tr>
<tr>
<fieldset><legend>
<td rowspan="3"><input type="checkbox">大分類2</legend></td>
<td><input type="checkbox">小分類2-1</td>
</tr>
<tr>
<td><input type="checkbox">小分類2-2</td>
</tr>
<tr>
<td><input type="checkbox">小分類2-3</td>
</fieldset></tr>
</table>

上記のようにしてみたところ、大分類1をチェックしたときに小分類1-1のみにチェックがつき、大分類2をチェックしたときに小分類2-1のみにチェックがつきました。。。
テーブルを組んだ場合、divなどで親子関係を作る必要があるのでしょうか。。。

補足日時：2006/11/28 14:49

通報する

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2006/11/28 12:43

大分類はそれぞれ同じ名前なのですか？

また小分類もすべて同じ名前なのですか？

ではそれぞれの要素の違いを何でみわけているのでしょうか？
value値？
もしなんらかの法則性があるなら実現可能です。

基本的にはそれぞれの名前に一定の法則性をつけて管理するのが
一番簡単だとおもいます。

とにかく、チェックボックスの状況をhtmlソースとして
一度、提示してみてください

この回答への補足

ご回答ありがとうございます。
大分類、小分類ともに全て違う名前です。
（ここで言う「名前」というのは、単なるテキスト名？でしょうか？？checkboxのnameのことであるならば、単純に1から順に名前をつけていこうかと思っております。）

チェックボックスの状況は、以下のようになっています。

<table border="0">
<tr>
<td rowspan="4" class="color_1"><input type="checkbox" name="b1">果物</td>
<td class="color_1"><input type="checkbox" name="s1">りんご</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">バナナ</td>
</tr>
<tr>
<td class="color_1"><input type="checkbox" name="s1">もも</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s1">なし</td>
</tr>
<tr>
<td rowspan="3" class="color_1"><input type="checkbox" name="b2">野菜</td>
<td class="color_1"><input type="checkbox" name="s2">きゅうり</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">トマト</td>
</tr>
<tr>
<td class="color_2"><input type="checkbox" name="s2">キャベツ</td>
</tr>
</table>

説明不足で申し訳ございませんでした。
ご教授の程、宜しくお願いいたします。