- 締切済み
(続)ラジオボタンの選択でチェックボックスのON/OFFを連動
前回（http://okwave.jp/qa5476132.html）とは全く違うものを参考に作成してみましたが、「ラジオボタンを選択するたびにチェックボックスのチェックが初期化される」というのがまだ出来ておりません。 どなたか教えていただけるとありがたいです＞＜ <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>
- kuru1125
- お礼率100% (7/7)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
HTMLソースでnameとclassがかなり重複してますが、ソースの構造でチェックすることにすればだいぶ省けそう。 <fieldset>にclass="group"を設定した部分のみが対象となるようにしました。ついでに、disableの初期設定も不要です。 #2様の回答とかなり似てるかも。ただし、「シルク」と色の連動はしていません。また、「チェック等の初期化」はHTMLのソース通りの初期化にしてあります。（とりあえず対象はcheckboxとselectのみです。他の要素もある場合は、setDefault()に追記することで可能になります。） <html> <head></head> <body> <form> <fieldset class="group"> <legend>■分類</legend> <input type="radio" value="アリ" name="fpcdata">アリ （ <input type="checkbox" value="DXF" name="Kind01[]">DXF <input type="checkbox" value="ガーバ" name="Kind01[]">ガーバ <input type="checkbox" value="PDF" name="Kind01[]">PDF ） <input type="radio" value="ナシ" name="fpcdata" checked>ナシ <input type="radio" value="相談" name="fpcdata">相談 </fieldset> <fieldset class="group"> <legend>■分類</legend> <input type="radio" value="ナシ" name="print" checked>ナシ <input type="radio" value="アリ" name="print">アリ （ <input type="checkbox" value="銀シールド" name="Kind04[]">銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]">銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]">銅ペースト <input type="checkbox" value="シルク" name="Kind04[]">シルク 色 <SELECT name="Kind04[]"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ） </fieldset> </fieldset> <fieldset> <legend>■対象外</legend> <input type="radio" name="c" value="c1" checked>Yes <input type="radio" name="c" value="d2">No （ <input type="checkbox" name="ca" value="ba">外1 <input type="checkbox" name="cb" value="bb">外2 ) </fieldset> </form> <script language="javascript"> (function(){ var j=0, f, fld = document.getElementsByTagName('FIELDSET'); while (f = fld[j++]) { if (f.className=='group') { var p = f.getElementsByTagName('INPUT')[0]; if (p) { setElem(p); if(f.addEventListener) { f.addEventListener('click', clickH, false); } else if(f.attachEvent) { f.attachEvent('onclick', clickH); } } } } function clickH(evt) { var t = evt.target || evt.srcElement; if (t.nodeName == 'INPUT' && t.type == 'radio') setElem(t); } function setElem(t) { var i=0, o, flg = true; if (e = getField(t)) { while (o = e[i++]) { if (o.nodeName == 'INPUT' && o.type == 'radio') { flg = !o.checked; } else { setDefault(o); } } } function setDefault(e) { if (e.nodeName == 'INPUT' && e.type == 'checkbox') { e.disabled = flg, e.checked = e.defaultChecked; } else if (e.nodeName == 'SELECT') { e.disabled = flg; var k, op = e.options; for (k=0; k<op.length; k++) op[k].selected = op[k].defaultSelected; } } } function getField(e) { while (e && e.nodeName != 'FIELDSET') e = e.parentNode; if (e) e = e.childNodes; return e; } })(); </script> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
シルクにチェックがあると色が選べる？？ <script> window.onload=function(){ var f0=document.getElementById("f0"); try{ f0.addEventListener("click",function(e){func(e)},true); }catch(e){ f0.attachEvent("onclick",function(e){func(e)}); } } function func(e){ var obj= (e.srcElement || e.target); if(obj.nodeName!="INPUT") return false; switch(obj.type){ case "radio": setRadio(obj); break; case "checkbox": setCheckbox(obj,"シルク","Kind04[]","SELECT"); break; } } function setRadio(obj){ var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox"){ n.disabled=obj.value!="アリ"; n.checked=false; } if(n.nodeName=="SELECT"){ n.disabled=true; n.selectedIndex=0; } n=n.nextSibling; } } function setCheckbox(obj,v,n,nn){ if(obj.value!=v) return false; var node=obj.parentNode.firstChild; while(node){ if(node.nodeName==nn && node.name==n){ node.disabled=!obj.checked; node.selectedIndex=0; } node=node.nextSibling; } } </script> </head> <body> <form id="f0"> <fieldset> <legend>■分類</legend> <input type="radio" value="アリ" name="fpcdata" class="fpcdata">アリ （ <input type="checkbox" value="DXF" name="Kind01[]" class="Kind01" disabled>DXF <input type="checkbox" value="ガーバ" name="Kind01[]" class="Kind01" disabled>ガーバ <input type="checkbox" value="PDF" name="Kind01[]" class="Kind01" disabled>PDF ） <input type="radio" value="ナシ" name="fpcdata" class="fpcdata" checked>ナシ <input type="radio" value="相談" name="fpcdata" class="fpcdata"> 相談 </fieldset> <fieldset> <legend>■分類</legend> <input type="radio" value="ナシ" name="print" class="print" checked>ナシ <input type="radio" value="アリ" name="print" class="print" >アリ （ <input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled>銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled>銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled>銅ペースト <input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled>シルク 色 <SELECT name="Kind04[]" class="Kind04" disabled> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ） </fieldset> </form> </body> </html>
お礼
丁寧に教えていただき有難うございました。 早速ソースコードを拝見し、使用させていただきました。 また、何かございましたら宜しくお願いいたします＞＜
- potluckker
- ベストアンサー率55% (22/40)
本当にざらっと見ただけですが 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 classDisable(f,cn,fl){ for (var i=0;i<f.elements.length;i++){ if(f.elements[i].className==cn){ f.elements[i].disabled=fl; f.elements[i].checked=false; } } } じゃだめなの？？？
お礼
丁寧に教えていただき有難うございました。 また、何かございましたら宜しくお願いいたします＞＜
お礼
丁寧に教えていただき有難うございました。 また、何かございましたら宜しくお願いいたします＞＜