• 締切済み

ラジオボタンの選択でチェックボックスの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>

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

chkboxのdisabledプロパティはチェックを付ける/はずすの制御でなく、 chkboxの使用の不可を切り替えに使うのだと思うのですが、.... チェックをつけたり外したりするのなら function detagroupDisabled(f,flg){ var objs=f.getElementsByTagName("input"); for(var i=0;i<objs.length;i++){ if(objs[i].className=="detagroup") objs[i].checked=!flg; } } じゃないでしょうか?

kuru1125
質問者

お礼

有難うございました。 私の勉強不足の為、こちらのソースコードで試したのですが、動作が出来ませんでした。 本当に有難うございます。

回答No.1

//radioの要素, checkboxの名前, 状態 var allCheck = function ( element, name, flag ) {  var form = element.form;  var inps = form.elements[ name ];  var cnt = 0, e;  flag = !!flag;  while( e = inps[ cnt++ ] )   if( 'checkbox' === e.type ) {    e.checked = flag;    e.disabled = !flag;   } }; なまえには、くうはくってやばくない? どうせなら、かんじもやめたほうが・・・。 ぜんかくくうはくは、はんかくにでも。 いんらいんようそは、ぶろっくようのなかにとか。 <script>ようそには、typeぞくせいがひつようとか。 <!DOCTYPE~も、ひつようとか

kuru1125
質問者

お礼

有難うございました。 私の勉強不足の為、こちらのソースコードで試したのですが、動作が出来ませんでした。本当に有難うございます。

kuru1125
質問者

補足

以下、全く違うものを参考に作成してみましたが、「ラジオボタンを選択するたびにチェックボックスのチェックが初期化される」 というのがまだ出来ておりません。 どなたか教えていただけるとありがたいです>< <html> <head> <script language="javascript"> function classDisable(f,cn,fl){ for (var i=0;i<f.elements.length;i++){ if(f.elements[i].className==cn){f.elements[i].disabled=fl} } } function classCheck(f,cn){ for (var i=0;i<f.elements.length;i++){ if(f.elements[i].className==cn && f.elements[i].checked==true && f.elements[i].disabled==false){return true;} } return false; } </script> </head> <body> <form> ■分類<br> <input type="radio" value="アリ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));">アリ ( <input type="checkbox" value="DXF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">DXF <input type="checkbox" value="ガーバ" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">ガーバ <input type="checkbox" value="PDF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">PDF ) <input type="radio" value="ナシ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));" checked>ナシ <input type="radio" value="相談" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));"> 相談  ■分類<br> <input type="radio" value="ナシ" name="print" class="print" onClick="classDisable(this.form,'Kind04',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));" checked>ナシ <input type="radio" value="アリ" name="print" class="print" onClick="classDisable(this.form,'Kind04',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));">アリ  ( <input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銅ペースト <input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">シルク  色 <SELECT name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ) </form> </body> </html>

関連するQ&A

専門家に質問してみよう