グループ別けされたチェックボックスの選択および解除

解決済

質問者：sadacha
質問日時：2006/12/03 19:15
回答数：2件

こんばんは。いつもお世話になっております。
随分前になりますが、こちらでご指導いただいた内容を元に、タイトルにある、グループ別けされたチェックボックス郡の選択および解除をしたいと考えているのですが、お恥ずかしながら、思うような結果を得る事が出来ません。
お忙しい中恐縮ですが、ご指導いただきたく投函させて頂きます。

※グループ単位で選択or解除をしたい
□カテゴリ（すべて選択or解除）
□１　□２　□３　□４　□５

□タイプ
□１　□２　□３　□４　□５

文字数制限に引っかかってしまったので、javascpipt部は非表示にいたします。

<input type="checkbox" onclick="CheckAlt(this)">
<div id="category">
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">
<input type="checkbox" name="category[]" value="5">
</div>

<input type="checkbox" onclick="CheckAlt(this)">
<div id="type">
<input type="checkbox" name="type[]" value="1">
<input type="checkbox" name="type[]" value="2">
<input type="checkbox" name="type[]" value="3">
<input type="checkbox" name="type[]" value="4">
<input type="checkbox" name="type[]" value="5">
</div>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： noname#23734
回答日時：2006/12/03 22:29

<form>

<p><input type="checkbox" onclick="CheckAlt(this)"></p>
<div>
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">
<input type="checkbox" name="category[]" value="5">
</div>
<p><input type="checkbox" onclick="CheckAlt(this)"></p>
<div>
<input type="checkbox" name="type[]" value="1">
<input type="checkbox" name="type[]" value="2">
<input type="checkbox" name="type[]" value="3">
<input type="checkbox" name="type[]" value="4">
<input type="checkbox" name="type[]" value="5">
</div>
</form>

面倒ですからこのようにHTMLを書いたら如何でしょうか
そうすると

Form = document.getElementsByTagName('form')[0]
P = Form.getElementsByTagName('p')
DIV = Form.getElementsByTagName('div')
for(i=0;i<P.length;i++){
Pinput = P[i].getElementsByTagName('input')[0]
DIVinput = DIV[i].getElementsByTagName('input')
if(Pinput.checked){for(k=0;k<DIVinput.length;k++){DIVinput[k].checked=true}}
else{for(k=0;k<DIVinput.length;k++){DIVinput[k].checked=false}}
}
こんな感じになるんでしょうかね。
Pは他のタグでも良いです。
早い話,フォーム内の要素を参照できれば良いですよね。

他にも
formsやelementsなどを使っても出きるとおもいます。
やり方は検索してください。

- 0
- 件

通報する

この回答へのお礼

al785z29さま

はじめまして、こんばんは。
コードまで記述していただき、またポイントなど教えていただき有難う御座います！
で、早速試したところ、思い描いていた結果を返す事ができました！
言葉足らずなご挨拶ではありますが、ご親切な対応に感謝しております。有難う御座いました。

通報する

お礼日時：2006/12/03 23:03

No.1

回答者： steel_gray
回答日時：2006/12/03 21:27

思うような結果とは？

Javascript部のソースと共に補足をお願いします。

- 0
- 件

通報する

この回答へのお礼

steel_grayさま

はじめまして、こんばんは。早速のお返事を有難うございます。
お恥ずかしいながら、JavaScriptのソースは以下のようになっており、（これでも）考えながら試行錯誤を繰り返しているところです。

<SCRIPT language="JavaScript">

</SCRIPT>

ちなみに、描いている結果とは、
□カテゴリ（すべて選択or解除）
□１　□２　□３　□４　□５

□タイプ
□１　□２　□３　□４　□５

の。一番最初のカテゴリをチェック（または解除）する事でその直下にある１～５までのチェック（または解除）を入れ、
3行目のタイプにチェックを入れることで、その下段にある１～５までのチェックを入れたいと考えています。