ラジオボタンが未選択時の制御方法について

このQ&Aのポイント
  • Webフォームのラジオボタンが未選択の場合に、ハヌけした書式で出力させない方法について教えてください。
  • Webフォームのラジオボタン1とラジオボタン3を選択し、ラジオボタン2を選択せずに出力すると、ハヌけした書式で出力されます。ハヌけしないように出力させる方法はありますか?
  • Webフォームのラジオボタンが未選択の場合、出力結果にハヌけした書式で表示されてしまいます。ハヌけしないように出力させる方法を教えてください。
回答を見る
  • ベストアンサー

ラジオボタンが未選択時の制御方法について

たびたびお世話になっております。 Webフォームを思考策後しながら作成しています。 下記のラジオボタン1 とラジオボタン3 は選択して、 ラジオボタン2 は選択せずに出力する下記のように、 ハヌけした書式で出力されます。 ハヌけしないように出力させる方法はありますでしょうか? ご教授をお願いいたします。 出力結果: ------------------------------------------------------------------------------- 【ラジオボタン1】:回答1 【ラジオボタン3】:回答1 ソース: ------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript">  <!-- 値の加工用// --> function textoutput() {        <!-- フォームを変数に// --> var formObj = document.form01;        <!-- radioを取得// --> var radio01 = formObj.A01;        <!-- radioを取得// --> var radio02 = formObj.A02;        <!-- radioを取得// --> var radio03 = formObj.A03;        <!-- textを結合用の変数として準備// -->        <!-- A01の中から選択されているものを取得// --> var text = '下記リカバリシートを案内' + '\n';        <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio01.length; i ++ ) { if ( radio01[i].checked === true ) { text += '【ラジオボタン1】:' + '\n' + radio01[i].value;}} text += '\n';        <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio02.length; i ++ ) { if ( radio02[i].checked === true ) { text += '【ラジオボタン2】:' + '\n' + radio02[i].value;}} text += '\n';        <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio03.length; i ++ ) { if ( radio03[i].checked === true ) { text += '【ラジオボタン3】:' + '\n' + radio03[i].value;}} text += '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--ラジオボタン// --> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン2</strong><br /> <input type="radio" name="A02" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン3</strong><br /> <input type="radio" name="A03" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio1-3"> <label for="radio1-3">回答3 </label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

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

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

なぜifの処理から text += '\n'; を外しているのでしょうか? >text += '【ラジオボタン2】:' + '\n' + radio02[i].value;}} >text += '\n'; が text += '【ラジオボタン2】:' + '\n' + radio02[i].value; text += '\n';}} でよいのでは? ただ結構HTMLの処理がずさんです、idの振り方とかクォーテーションの 入れ方のミスとか・・・ 全体の流れ的にはフォームのエレメンツを押し並べてチェックする手もありますね <script> function textoutput(f) { var text = '下記リカバリシートを案内' + '\n'; for(var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="A01" && f[i].checked==true){ text += '【ラジオボタン1】:' + '\n' + f[i].value+ '\n'; } if(f[i].type=="radio" && f[i].name=="A02" && f[i].checked==true){ text += '【ラジオボタン2】:' + '\n' + f[i].value+ '\n'; } if(f[i].type=="radio" && f[i].name=="A03" && f[i].checked==true){ text += '【ラジオボタン3】:' + '\n' + f[i].value+ '\n'; } } f.elements["output"].value = text; } </script> <strong>リカバリシート案内フォーム</strong><br /><br /> <form> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br> <strong>・ラジオボタン2</strong><br> <input type="radio" name="A02" value="回答1" id="radio2-1"> <label for="radio2-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio2-2"> <label for="radio2-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio2-3"> <label for="radio2-3">回答3</label> <br> <strong>・ラジオボタン3</strong><br> <input type="radio" name="A03" value="回答1" id="radio3-1"> <label for="radio3-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio3-2"> <label for="radio3-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio3-3"> <label for="radio3-3">回答3 </label> <br> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form>

yumi007
質問者

お礼

まだまだHTMLもJavaScriptも勉強を始めてから2日ですが、 右も左も分からぬまま、なんとか構文等が理解出来るように頑張ってます! <script>と</script>の間の部分をもう少し噛み砕いてご教授頂けますでしょか? 変数とかがやっとボンやりと理解をし始めてるところです。 どうぞ何卒よろしくお願い致します。

その他の回答 (1)

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

>もう少し噛み砕いて まず <input type="button" value="ログ出力" onClick="textoutput(this.form);"> とすることでinputの親要素であるフォームをtextoutputの引数として わたすことができます。 formは0から始まる子エレメンツをもっておりエレメンツの総数はform.length と同値です。したがって for(var i=0;i<f.length;i++){ } とするとfのすべての要素を走査することができ、各要素へは f[i]でアクセスできます。 またifでチェックしているのは3項目、すなわち f[i].type=="radio"・・・要素のタイプがradioである f[i].name=="~" ・・・要素の名前が~である f[i].checked==true ・・・要素にチェックがついている これを&&でつなぐと全ての条件に合致する必要があります ifの条件で合致する場合textに値を書き込むのが text += '【ラジオボタン~】:' + '\n' + f[i].value+ '\n'; です。 構造を把握できればさほど難しいことはないと思います

yumi007
質問者

お礼

分かりやすい説明をありがとうございました。 仕組みを理解して少しずつですが、 JavaScriptが使えるよう勉強したいと思います。 ご教授頂きありがとうございました。

関連するQ&A

  • フォームの制御について

    下記2つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; ソース: ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript">  <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他:" id="checkbox 1-1" > <label for="checkbox 1-1">その他:</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3:</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか?');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } 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> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • チェックボックス とラジオボタンの値取得について

    チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた2をチェクして男性を選択した場合 「そのた2 男性」と表示したい。 例 そのた1 そのた2 男性 そのた4 そのた5 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか? labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は1個ですが、 □が30個以上 のチェックボックスが50個くらいあるので、 1回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか? 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

  • ラジオボタン

    htmlで質問です。 input typeのラジオボタンを横並びにしたいのですがどうすればできますか? <div class="form-item"> <label for="sex"></label> <input type="radio" name="sex" value="男"><i class="fas fa-mars man"></i></input> <input type="radio" name="sex" value="女"><i class="fas fa-venus woman"></i></input> </div>

    • ベストアンサー
    • HTML
  • チェックされたラジオボタンにフォーカスを移動したい

    <LABEL><INPUT type="radio" id="a" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="a" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="b" value="2">なし</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="0" checked>すべて</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="1">一部</LABEL><BR> <LABEL><INPUT type="radio" id="c" value="2">なし</LABEL><BR> ・・・ のようにラジオボタンがグループ別に並んでいる場合に Enterキーを押したときにフォーカスが次のラジオボタングループの チェックが入ったラジオボタンにフォーカスを移動したいのですが、 何かいい方法はないでしょうか?

  • ラジオボタンの未選択チェックについて

    ラジオボタンの未選択チェックに困っています! フォームにInputして、CGIで送信するように設定しています。 但し、送信内容を管理者がメール受信するため、ラジオボタンの「name」は漢字にしています。   <name> <value> Webの見やすさ = 見やすい  と表示されるようにです。 <INPUT type="radio" name="Webの見やすさ" value="見やすい" id="Q11"><label for="Q11"> 見やすい</label> <INPUT type="radio" name="Webの見やすさ" value="特に問題ない" id="Q12"><label for="Q12"> 特に問題ない</label> <INPUT type="radio" name="Webの見やすさ" value="ふつう" id="Q13"><label for="Q13"> ふつう</label>   <INPUT type="radio" name="Webの見やすさ" value="やや見にくい" id="Q14"><label for="Q14"> やや見にくい</label>   <INPUT type="radio" name="Webの見やすさ" value="見にくい" id="Q15"><label for="Q15"> 見にくい</label></TD> この場合、ラジオボタンの未選択チェックは、どのようにしたら いいのでしょうか? 今までは、「name」を英数にしていたので、下記のようにしていました。 <script language="JavaScript"> <!-- function chk(oj) { if ((oj.Q1[0].checked == false) && (oj.Q1[1].checked == false) && (oj.Q1[2].checked == false) && (oj.Q1[3].checked == false) && (oj.Q1[4].checked == false)) { alert("Q1のボタンが未選択です"); return false ; } else { return true ; } }//--> </script> 初心者のため、何を変えたらいいのか・・・ホームページを調べたのですが分かりませんでした。 「name」が漢字の場合、どのように指示したらいいのか、ぜひぜひご教授願います。 どうぞよろしくお願いいたします。

  • ラジオボタンが選択された項目のみ操作可能

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンは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" />A小学校<br/> <input type="checkbox" name="aa[]" value="2" />B小学校<br/> <input type="checkbox" name="aa[]" value="3" />C小学校<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" />A中学校<br/> <input type="checkbox" name="bb[]" value="2" />B中学校<br/> <input type="checkbox" name="bb[]" value="3" />C中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンの選択に応じてインプットを表示する。

     お世話になります。  現在、ラジオボタンの選択に応じてインプットのフィールドが表示されるようなHTMLフォームを作っているのですが、煮詰まってしまいました。どうしてもうまくいかないのですが、 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function checkradio( disp ) { document.getElementById('input').style.display = disp; } //--> </script> </head> <body> <form action="xxx"> <p> <input type="radio" name="domain" id="1" value="1" onclick="checkradio('none');" /> <label for="1">選択1</label><br /> <input type="radio" name="domain" id="2" value="2" onclick="checkradio('none');" /> <label for="2">選択2</label><br /> <input type="radio" name="domain" id="3" value="3" onclick="checkradio('block');" checked /> <label for="3">選択3</label><br /> </p> <p id="input"> 選択3の詳細を書いてください。:<input type="text" id="input" name="select3" value="" size="20" /> </p> </form> </body> </html> と、こんな感じで、3を選択した時しかインプットを表示できません。選択1や選択2を表示した時には、「選択1の詳細を書いてください。」または「選択2の詳細を書いてください。」と表示させたいのですが、どこをどんな風に直せばいいでしょうか? それと同時に初期画面ではこのインプットを非表示にしてラジオボタンを選択した時に表示されるようにしたいと思っています。 よろしくお願いします。

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

  • selectした項目によって、radioボタンの値を変える方法

    selectボックスの値によって、ラジオボタンに自動的にチェックを入れるというものを作りたいのですが、やり方がわからないのでどなたか回答をお願いします。 selectボックスは、 <select name="Q01" id="Q01"> <option selected>▼選択</option> <option value="1">Aコース</option> <option value="2">Bコース</option> <option value="3">Cコース</option> </select> というようなものを用意しています。 ラジオボタンは、 <label for="Q02_1"> 有り<input name="Q02" type="radio" id="Q02_1" value="0" checked> </label> <label for="Q02_2"> 無し<input name="Q02" type="radio" id="Q02_2" value="1"> </label> <label for="Q03_1"> 有り<input name="Q03" type="radio" id="Q03_1" value="0" checked> </label> <label for="Q03_2"> 無し<input name="Q03" type="radio" id="Q03_2" value="1"> </label> <label for="Q04_1"> 有り<input name="Q04" type="radio" id="Q04_1" value="0" checked> </label> <label for="Q04_2"> 無し<input name="Q04" type="radio" id="Q04_2" value="1"> </label> ・ ・ ・ ・ というようなものを用意しています。 Aコースを選ぶと、 Q02は「有り」、Q03は「無し」、Q04は「有り」 Bコースを選ぶと、 すべて「有り」 Cコースを選ぶと、 すべて「無し」 というような、コースによってラジオボタンにチェックが入るという仕組みです。 宜しくお願い致します。

専門家に質問してみよう