複数のラジオボタンから選択した行のチェックボックスを有効にする方法
- 複数のラジオボタンから1つを選択すると、その行の5つのチェックボックスが有効になる方法を教えてください。
- 単発で動いた時のソースコードを使用して、複数のラジオボタンから1つを選択すると、その行の5つのチェックボックスを有効にする方法を実装しています。
- ラジオボタンとチェックボックスを組み合わせたフォームで、選択したラジオボタンに応じてチェックボックスを有効化する方法について教えてください。
- ベストアンサー
複数のラジオボタンの中から１つを選択すると、その行の5つのチェックボッ
複数のラジオボタンの中から１つを選択すると、その行の5つのチェックボックスが有効になる方法を教えていただけないでしょうか。 １つのラジオボタンでならなんとか出来たのですが、 複数になるとどうもうまくいきません。 検索してはみたのですが、これといったものがなく質問することにしました。 以下のソースは単発で動いた時のものです。 <html> <head> <script type="text/javascript"> function checkfunc() { for(i=0; i<5; i++) { document.myform.chk1[i].disabled = !(document.myform.yesno.checked); } } </script> </head> <body onLoad="checkfunc();"> <form name="myform"> <input type="radio" name="yesno" value="1" onClick="checkfunc();">ラジオボタン <input type="checkbox" name="chk1" value="0">チェックボックス0 <input type="checkbox" name="chk1" value="1">チェックボックス1 <input type="checkbox" name="chk1" value="2">チェックボックス2 <input type="checkbox" name="chk1" value="3">チェックボックス3 <input type="checkbox" name="chk1" value="4">チェックボックス4 </form> </body> </html> 希望のイメージとしてはこんな感じです↓ ○ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス ◎ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス ○ラジオボタン □チェックボックス □チェックボックス □チェックボックス □チェックボックス □チェックボックス 申し訳ないのですが、どなたか教えていただけないでしょうか。
- barakamon
- お礼率46% (62/133)
- JavaScript
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たとえば、divなどでグループをつくっておいて処理するとか・・・ <script> window.onload=function(){ checkfunc() } function checkfunc(){ var f=document.getElementById("hoge"); for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox") f[i].disabled=true; } for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].checked){ var n=f[i].parentNode.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false; n=n.nextSibling; } } } } </script> <form id="hoge"> <div> <input type="radio" name="yesno" value="1" onclick="checkfunc()">ラジオボタン1 <input type="checkbox" name="chk[1][]" value="0">チェックボックス0 <input type="checkbox" name="chk[1][]" value="1">チェックボックス1 <input type="checkbox" name="chk[1][]" value="2">チェックボックス2 </div> <div> <input type="radio" name="yesno" value="1" onclick="checkfunc()">ラジオボタン2 <input type="checkbox" name="chk[2][]" value="0">チェックボックス0 <input type="checkbox" name="chk[2][]" value="1">チェックボックス1 <input type="checkbox" name="chk[2][]" value="2">チェックボックス2 </div> <div> <input type="radio" name="yesno" value="1" onclick="checkfunc()">ラジオボタン3 <input type="checkbox" name="chk[3][]" value="0">チェックボックス0 <input type="checkbox" name="chk[3][]" value="1">チェックボックス1 <input type="checkbox" name="chk[3][]" value="2">チェックボックス2 </div> </form>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです <html> <head> <title></title> </head> <body> <div id="sample"> <p> <input type="radio" name="yesno" onclick="checkfunc();">ラジオ１<br> <input type="checkbox" name="chk1" value="0">チェックボックス0 <input type="checkbox" name="chk1" value="1">チェックボックス1 <input type="checkbox" name="chk1" value="2">チェックボックス2 <input type="checkbox" name="chk1" value="3">チェックボックス3 <input type="checkbox" name="chk1" value="4">チェックボックス4 </p> <p> <input type="radio" name="yesno" onclick="checkfunc();">ラジオ２<br> <input type="checkbox" name="chk2" value="0">チェックボックス0 <input type="checkbox" name="chk2" value="1">チェックボックス1 <input type="checkbox" name="chk2" value="2">チェックボックス2 <input type="checkbox" name="chk2" value="3">チェックボックス3 <input type="checkbox" name="chk2" value="4">チェックボックス4 </p> </div> <script type="text/javascript"> checkfunc(); function checkfunc(){ var list = document.getElementById('sample').getElementsByTagName('input'); var flag; for(var i=0;list[i];i++) { if(list[i].type == 'radio'){ flag = list[i].checked; continue; } list[i].disabled = ! flag; } } </script> </body> </html>
関連するQ&A
- 【続】チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除
http://oshiete1.goo.ne.jp/qa2692133.html でご教示いただいたJSは，チェックボックスのON/OFFに連動して ラジオボタンのdisabledを解除するものです． ところが本番環境は次のように大量です． Ｑ１ □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5 Ｑ２ □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5 ：（中略） Ｑ15 □チェック ◎ラジオ1 ○ラジオ2 ○ラジオ3 ○ラジオ4 ○ラジオ5 なので，Ｑの数（15問）だけまったく同じfunctionを連ねましたが（↓）， もっと効率よい書き方があれば教えてください． <html> <head> <script> function checkfunc1() { for(i=0; i<5; i++) { document.myform.rdo1[i].disabled = !(document.myform.yesno1.checked); } } function checkfunc2() { for(i=0; i<5; i++) { document.myform.rdo2[i].disabled = !(document.myform.yesno2.checked); } } </script> </head> <body onLoad="checkfunc1();checkfunc2();"> <form name="myform"> <input type="checkbox" name="yesno1" onClick="checkfunc1();">チェック <input type="radio" name="rdo1">0 <input type="radio" name="rdo1">1 <input type="radio" name="rdo1">2 <input type="radio" name="rdo1">3 <input type="radio" name="rdo1">4<br> <input type="checkbox" name="yesno2" onClick="checkfunc2();">チェック <input type="radio" name="rdo2">0 <input type="radio" name="rdo2">1 <input type="radio" name="rdo2">2 <input type="radio" name="rdo2">3 <input type="radio" name="rdo2">4 </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除
下記の動作をする checkfunc(); の書き方をご教示ください． <html> <head> <script type="text/javascript"> checkfunc() </script> </head> <body> <form name="myform"> <input type="checkbox" name="yesno" value="1">チェックボックス <input type="radio" name="rdo1" value="0">ラジオボタン0 <input type="radio" name="rdo1" value="1">ラジオボタン1 <input type="radio" name="rdo1" value="2">ラジオボタン2 <input type="radio" name="rdo1" value="3">ラジオボタン3 <input type="radio" name="rdo1" value="4">ラジオボタン4 </form> </body> </html> (1) このHTMLのラジオボタン5つは，最初は全てdisabledです． (2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです． (3) 逆に，チェックが外れたらラジオボタンはdisabledに戻ります． (4) このjavascriptは，PHPファイルに組み込みますが．表示時にDBを読み込んでどれに チェック/選択されていたかによって，checkboxやradioに「checked」を追記します． その場合，enabled/disablesの関係に矛盾がないようにもしたいですが， <body>に onload="checkfunc();" と入れればいいでしょうか？ なお，IE以外のブラウザでも動作できると大変助かります．よろしくお願い致します．
- ベストアンサー
- JavaScript
- ラジオボタンについて
つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか？ LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか？ 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。
- ベストアンサー
- JavaScript
- javascriptでチェックボックスの選択状況をチェックする方法につ
javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが１か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください！"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか？
- 締切済み
- JavaScript
- ラジオボタンが選択された項目のみ操作可能
ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled？readonly？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの全選択
<input type="checkbox" name="chk" value=1> <input type="checkbox" name="chk" value=2> <input type="checkbox" name="chk" value=3> <input type="checkbox" name="chk" value=4> <input type="checkbox" name="chk" value=5> このように同一名称のチェックボックスに対して ボタンを押下された時全てのチェックボックスを チェックするＪａｖａＳｃｒｉｐｔの 書き方を教えて貰えないでしょうか
- ベストアンサー
- JavaScript
- ２つのボタンによるSubmitについて
javascript初心者です。 <form name="sample01" action="aaa.html" method="POST" > <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> <input type="checkbox" name="chk[]" value="3"> </form> このチェックボックスの値を、submitで渡したいのですが、 AボタンとBボタンの２つ設けて、それぞれクリックすると別ファイルに遷移させたいのです。 Aボタンは、「sample01」のaction属性にあるaaa.html Bボタンは、bbb.html こういったことはできるのでしょうか？
- ベストアンサー
- JavaScript
- ボタンを押したらラジオボタンを選択したい(サンプルソース付)
ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか？ ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>
- ベストアンサー
- JavaScript
- 選択したたラジオボタンの値をSUBMITボタンに
選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。 イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"><!-- function set() { n = document.myFORM.Radio.value; } // --> </script> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onclick="set()" CHECKED> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★"></form>
- ベストアンサー
- JavaScript
- ドロップダウンメニューで選択された内容通りにチェックを入れるJS
ドロップダウンメニューで選択された内容通りにチェックを入れるJS をご教示下さい。 なお、本番環境で対象とするチェックボックスのnameは、全てchkで始まっている法則性があります。 よろしくお願い致します。 <html> <head> <script type="text/javascript"> <!-- // --> </script> </head> <body> <form> <select name="myselect"> <option selected>全てにチェック</option> <option>全てチェック解除</option> <option>奇数だけチェック</option> <option>偶数だけチェック</option> <option>1、6、8番だけチェック</option> <option>3番以降全てチェック</option> </select> <br> <input type="checkbox" value="1" name="chk01" checked>1番<br> <input type="checkbox" value="1" name="chk02" checked>2番<br> <input type="checkbox" value="1" name="chk03" checked>3番<br> <input type="checkbox" value="1" name="chk04" checked>4番<br> <input type="checkbox" value="1" name="chk05" checked>5番<br> <input type="checkbox" value="1" name="chk06" checked>6番<br> <input type="checkbox" value="1" name="chk07" checked>7番<br> <input type="checkbox" value="1" name="chk08" checked>8番<br> <input type="checkbox" value="1" name="chk09" checked>9番<br> <input type="checkbox" value="1" name="chk10" checked>10番 </form> </body> </html>
- ベストアンサー
- JavaScript
