- ベストアンサー
一つのチェックボックスのON/OFFに応じて他の複数をON/OFFに
昨日の質問した下記の関連で再質問です。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=1765687 親１に対し、子１～４と、合計5つのチェックボックスがあり、 親のチェックOFF ⇒ 子1～4をdisableに、 子のチェックON ⇒ 子1～4をactive としたいのですが、 ＃４さんのご回答を適用すると、上記5つのチェックボックス以外も 全てdisableの対象になってしまいます。 他方、自分の元質問のソースを改造しようとも思いましたが、 子1～4のname属性が全て違う名前のため、そのままでは使えません。 ついでに（些細なことですが） 子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 テンプレートは下記ですが、よろしくお願い致します。 <html> <head> <script language="javascript" type="text/javascript"> // ■■■■ </script> </head> <body> <form id="query" name="query"> <input type="checkbox" name="oya" value="1" checked>親 <input type="checkbox" name="ko1" id="ko1" value="1" checked>子1 <input type="checkbox" name="ko2" id="ko2" value="1" checked>子2 <input type="checkbox" name="ko3" id="ko3" value="1" checked>子3 <input type="checkbox" name="ko4" id="ko4" value="1" checked>子4 </form> </body> </html>
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ソースによっては nameがko+nで１から連番になっているとかだったら単純にループで回せるかも。 ------------------------------------------------------ <html> <head> <script language="javascript" type="text/javascript"> function autochk(p,name){ var f = p.form; var el; for(var prop in f){ if(prop.toString().substr(0,2)==name){//名前がname('ko')で始まるもの el=f.elements[prop]; if(el.type=="checkbox"){//このチェックは省略してもいいかも el.disabled = !p.checked; } } } } </script> </head> <body> <form id="query" name="query"> <input type="checkbox" name="oya" value="1" checked checked onclick="autochk(this,'ko');">親 <input type="checkbox" name="ko1" id="ko1" value="1" checked>子1 <input type="checkbox" name="ko2" id="ko2" value="1" checked>子2 <input type="checkbox" name="ko3" id="ko3" value="1" checked>子3 <input type="checkbox" name="ko4" id="ko4" value="1" checked>子4 <input type="text" name="other" value="その他"> </form> </body> </html>
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
idよりはこの場合はclassの方が使いやすくない ですか？ <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){f.form.elements[i].disabled = !f.checked;} } } </script> </head> <body> <form> <input type="checkbox" name="oya" value="1" checked onclick="autochk(this);">親 <input type="checkbox" name="ko1" class="ko" value="1" checked>子1 <input type="checkbox" name="ko2" class="ko" value="1" checked>子2 <input type="checkbox" name="ko3" class="ko" value="1" checked>子3 <input type="checkbox" name="ko4" class="ko" value="1" checked>子4 <input type="checkbox" name="other" value="1" checked>他 </form> </body> </html>
お礼
yambejpさん、いつもありがとうございます。 動作はすこぶる快適です。 おかげさまで大変助かりました。 ありがとうございました。
- bin-chan
- ベストアンサー率33% (1403/4213)
> 親のチェックOFF ⇒ 子1～4をdisableに、 > 子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 親がチェックOFFで子１～４がdisableなら 子のチェック自体が行えないことないですか？
お礼
本当ですね、失礼しました。 何のためのdisableなことやら(^^;;; > 子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 は、どうか無視下さい。
お礼
BLUEPIXYさん、再々のレスありがとうございます。 動作確認させていただきましたが 実にいい感じです。 name('ko')で始める件については問題ありませんので そのように調整いたします。