- ベストアンサー
selectメニューによるチェックボックスの表示・非表示
リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見／回答を頂けませんでしょうか？宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>
- btnistho
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
基本フローとしては常に全部disableにして、必要に応じてdisableを解除 とするとすっきりしますね。 こんな感じでどうでしょう？ <html> <head> <title></title> <script type="text/javascript"> window.onload = function(){ disableAllGr(); } function disableAllGr(){ var inputList = document.getElementsByTagName('p'); for(var i=0;i<inputList.length;i++){ var obj=inputList[i]; if(obj.id.match(/^gr_/)){ var n=obj.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=true; n=n.nextSibling; } } } } function fchk2(obj) { disableAllGr(); var nameList = obj.value.split(/,/); for( var i in nameList){ if(!document.getElementById('gr_'+nameList[i])) return false; var n=document.getElementById('gr_'+nameList[i]).firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false; n=n.nextSibling; } } } </script> </head> <body> <form> <p id="ctr_FLAG"> <select onchange='fchk2(this)'> <option value=''>選択</option> <option value='A'>Aをアクティブに</option> <option value='A,B'>AとBをアクティブに</option> <option value='A,B,C'>AとBとCをアクティブに</option> <option value='A,B,C,E'>AとBとCとEをアクティブに</p> </select> </p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> </p> <p id="gr_E"> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </p> </form> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
HTML部分は好みで色々変えた。 あくまでサンプルなんで自分流に直して試してみて。 スクリプト function gr_ctrl(){ var S=document.getElementById('ctr_FLAG'); for(var i=0;S.options[i];i++){ var C=document.getElementById(S.options[i].value).getElementsByTagName('input'); for(var j=0;C[j];j++) C[j].disabled = !S.options[i].selected; } } window.onload=gr_ctrl; ＨＴＭＬ <form> <p><select size="2" multiple id="ctr_FLAG" onchange="gr_ctrl()"> <option value="gr_A">Ａ</option> <option value="gr_B">Ｂ</option> </select></p> <fieldset id="gr_A"><legend>グループＡ</legend> <ul> <li><input type="checkbox" value="1" name="a1" id="a1"> <label for="a1">選択肢a1</label></li> <li><input type="checkbox" value="1" name="a2" id="a2"> <label for="a2">選択肢a2</label></li> <li><input type="checkbox" value="1" name="a3" id="a3"> <label for="a3">選択肢a3</label></li> </ul> </fieldset> <fieldset id="gr_B"><legend>グループＢ</legend> <ul> <li><input type="checkbox" value="1" name="b1" id="b1"> <label for="b1">選択肢b1</label></li> <li><input type="checkbox" value="1" name="b2" id="b2"> <label for="b2">選択肢b2</label></li> <li><input type="checkbox" value="1" name="b3" id="b3"> <label for="b3">選択肢b3</label></li> </ul> </fieldset> </form>
お礼
回答いただき本当に有難うございます。 いろいろ参考にさせていただいています。
お礼
まさに望んだとおりの結果がでました。 本当に有難うございます。