• ベストアンサー

一つのチェックボックスの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>

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

ソースによっては 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>

litton101
質問者

お礼

BLUEPIXYさん、再々のレスありがとうございます。 動作確認させていただきましたが 実にいい感じです。 name('ko')で始める件については問題ありませんので そのように調整いたします。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

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>

litton101
質問者

お礼

yambejpさん、いつもありがとうございます。 動作はすこぶる快適です。 おかげさまで大変助かりました。 ありがとうございました。

  • bin-chan
  • ベストアンサー率33% (1403/4213)
回答No.1

> 親のチェックOFF　⇒　子1～4をdisableに、 > 子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 親がチェックOFFで子１～４がdisableなら 子のチェック自体が行えないことないですか？

litton101
質問者

お礼

本当ですね、失礼しました。 何のためのdisableなことやら(^^;;; > 子1～4の全てがONにされた時に、親がOFFなら自動でONにしたいです。 は、どうか無視下さい。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 一方のチェックボックスのON/OFFに応じてもう一方をON/OFFに

    文末のように、「親」「子」のチェックボックスがあります。 規定値は双方ともにONです。 「親」のチェックがOFFになったら、「子」は無効（disable）に、 再び「親」のチェックがONになったら、「子」はactiveにしたいです。 過去に本掲示板でご教示いただいたスクリプトを応用したら 何とか実現できたのですが、シンプルな動作なので もっと簡潔（2行位？？）にできそうに思います。 いかがなものでしょうか？ <html> <head> <script language="javascript" type="text/javascript"> function autochk(f,name){ var names=document.getElementsByName(name); for(var i=0; i<1; i++){ names[i].disabled = !f.checked; } } </script> </head> <body> <form id="query" name="query"> <input type="checkbox" name="oya" value="1" checked onclick="autochk(this,'ko');">親 <input type="checkbox" name="ko" value="1" checked>子</div> </form> </body> </html>

  • チェックボックスのON/OFFに応じて別の複数のチェックボックスも連動ON/OFF

    7番のcheckboxをON→1,2,4,5番にチェックもON 7番のcheckboxをOFF→1,2,4,5番にチェックもOFF という風に動作させる記述をご教示ください。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> </script> </head> <body> <form action="" method="post" name="myform"> 去年<br> 1番<input type="checkbox" name="kyonen[]" value="1">1月<br> 2番<input type="checkbox" name="kyonen[]" value="2">2月<br> 3番<input type="checkbox" name="kyonen[]" value="3">3月<br> 今年<br> 4番<input type="checkbox" name="kotosi[]" value="1">1月<br> 5番<input type="checkbox" name="kotosi[]" value="2">2月<br> 6番<input type="checkbox" name="kotosi[]" value="3">3月<br> 7番<input type="checkbox" name="mychk">去年と今年の1、2月をまとめてチェック<br> </form> </body> </html>

  • チェックに応じて違うチェックボックスをアクティブにしたい

    次のHTMLのように、大分類、小分類のような構成のチェックボックス グループがあります（初期設定は全部チェック無しです） 普段は[a][b][c][d]をdisableとしておき、(1) にチェックが入った 場合に[d]以外（[a][b][c]）アクティブ（？とにかくチェックを入れる ことができる）ようにするにはどうしたらいいでしょうか。 よろしくお願い致します。 <form id="Form1"> : <INPUT TYPE="CHECKBOX" NAME="food" value="果物">(1) 果物 <INPUT TYPE="CHECKBOX" NAME="food" value="野菜">(2) 野菜 <INPUT TYPE="CHECKBOX" NAME="food" value="肉魚">(3) 肉魚 <br> <INPUT TYPE="CHECKBOX" NAME="fruit" value="りんご">[a] りんご <INPUT TYPE="CHECKBOX" NAME="fruit" value="みかん">[b] みかん <INPUT TYPE="CHECKBOX" NAME="fruit" value="ぶどう">[c] ぶどう <INPUT TYPE="CHECKBOX" NAME="fruit" value="バナナ">[d] バナナ : </form>

  • チェックボックスのチェックについて

    submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ～以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。

  • 複数のチェックボックスをチェックしたい

    質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

  • ラジオボタンの選択でチェックボックスのON/OFFを連動

    ラジオボタンを選択すると、連動してチェックボックスにチェックが入れられる仕組みを作りたいのですが。 本番環境ではこの仕組みを3つほど使用したいです。 現在ここまでは出来ていますが、2つ・3つとこの仕組みを増やすと、動作が出来なくなってしまいます。 さらに、ラジオボタンを選択するたびにチェックボックスのチェックが初期化される仕組みにしたいのですが・・・＞＜ どなたか教えて頂けないでしょうか？ <html> <head> <script> window.onload=function(){ document.getElementById("deta1").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta2").onclick=function(){ detagroupDisabled(this.form,true); } document.getElementById("deta3").onclick=function(){ detagroupDisabled(this.form,false); } } function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].disabled=flg; } } </script> </head> <body> <form action="./postmail.cgi" method="post"> <input type="radio" name="FPCデータ" id="deta3" value="アリ"><label for="deta3">アリ</label> <input type="checkbox" name="FPCデータ アリ" id="DXF" class="detagroup" value="DXF" disabled><label for="DXF">DXF</label> <input type="checkbox" name="FPCデータ アリ" id="ガーバ" class="detagroup" value="ガーバ" disabled><label for="ガーバ">ガーバ</label> <input type="checkbox" name="FPCデータ アリ" id="PDF" class="detagroup" value="PDF" disabled><label for="PDF">PDF</label> <input type="radio" name="FPCデータ" id="deta1" value="ナシ" checked><label for="deta1">ナシ</label> <input type="radio" name="FPCデータ" id="deta2" value="アリ"><label for="deta2">相談</label><br><br> <input type="radio" name="補強板" value="ナシ" checked="checked">ナシ <input type="radio" name="補強板" value="アリ">アリ <input type="checkbox" name="補強板" value="ポリイミド">ポリイミド <input type="checkbox" name="補強板" value="ポリエステル">ポリエステル <input type="checkbox" name="補強板" value="ガラエポ">ガラエポ <input type="checkbox" name="補強板" value="相談">相談<br><br> <input type="radio" name="印刷" value="ナシ" checked="checked">ナシ <input type="radio" name="印刷" value="アリ">アリ <input type="checkbox" name="印刷" value="銀シールド">銀シールド <input type="checkbox" name="印刷" value="銀ペースト">銀ペースト <input type="checkbox" name="印刷" value="銅ペースト"> 銅ペースト <input type="checkbox" name="印刷" value="シルク">シルク 色 <SELECT NAME="印刷"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> 　 </form> </body> </html>

  • 送信後のチェックボックスの表示

    最初の画面でAにチェックされているとします。 そのあとに、AとBをチェックしたあとにSubmitで送信します。 送信したあとに、AとBにチェックした最初の画面を表示させたいときは、 どんな風にすればよいのでしょうか。 今は・・・ If Request.Form="" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Else Select Request.Form("test") Case "A" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Case "B" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B" checked>B <input type="checkbox" name="test" value="C">C Case "C" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C" checked>C 　　・・・ End Select End If というように、全ての場合のときに"checke"をつけて表示させています。 もっと、効率のよい書き方はないものでしょうか？

  • 複数あるチェックボックスの入力チェックするには？

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか？ <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

  • チェックボックスの未入力チェック

    ざっとですけれども <form action="**" name="myform" onsubmit="return Check()" method=post> <input type="checkbox" name="Erasedata" id="Erasedata" value="1" > <input type="checkbox" name="Erasedata" id="Erasedata" value="2" > ・・・ <input type="checkbox" name="Erasedata" id="Erasedata" value="5" > <input type="submit" value="選択されたものを削除する"> このようなチェックボックスがあったとして function Check() { for (i=0;i<document.myform.length;i++) 　{ 　　if(document.myform.Erasedata[i].checked==true) {return true;} 　} alert("どこかにチェックを入れて下さい "); return false; } といった感じで未入力チェックをしています。 チェックボックスが複数の場合はうまく動くのですが、チェックボックスがひとつだとうまくいきません。スクリプトで何か問題があるようでしたらご指摘お願いできませんでしょうか。よろしくお願いいたします。

  • チェックボックスの戻り

    チェックボックスのvalue値に数字を入れてPOSTしています。 DB登録の前にその値を足し算してDBに登録しています。 <input type="checkbox" name="cb[0]" value="1"> <input type="checkbox" name="cb[1]" value="2"> <input type="checkbox" name="cb[2]" value="4"> <input type="checkbox" name="cb[3]" value="8"> <input type="checkbox" name="cb[4]" value="16"> ・・・のようにしています。DBの値を読み取ってcheckedを付ける際はどのようにしたら効率よく処理できるでしょうか？switchを使うとすごくチェックボックスの数が増えると厄介です。困っています。教えてください。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する