ラジオボタンを他の物に変えても動作するようにしたい
- ラジオボタンを<button>や<img>に変えることは可能なのでしょうか。
- ラジオボタンでチェックされた項目に合わせて用意されている文章が表示されるものです。
- 質問文章全体の100文字程度の要約文を3つ作成し、文章の内容をまとめてください。
- ベストアンサー
ラジオボタンを他の物に変えても動作するようにしたい
ラジオボタンでチェックされた項目に合わせて用意されている文章が表示されるものです。 そのラジオボタンを<button>や<img>に変えることは可能なのでしょうか。 <!--メニュー--> <div> <form method="get" name="updateHTML"> <input type="radio" name="imageSize" value="00" onclick="return toggle();" checked /> No.01<br /> <input type="radio" name="imageSize" value="01" onclick="return toggle();" /> No.02<br /> <input type="radio" name="imageSize" value="02" onclick="return toggle();" /> No.03<br /> </form> </div> <!--表示文--> <div id="html-00" style="display:inline;"> テキスト０１ </div> <div id="html-01" style="display:none;"> テキスト０２ </div> <div id="html-02" style="display:none;"> テキスト０３ </div> <!--スクリプト--> <script type="text/javascript"> var options = new Array('00','01','02'); function toggle() { var form = document.forms['updateHTML']; var size = _getOption( form.imageSize ); var chosen = size; for ( var i = 0; i < options.length; i++ ) { var htmlId = 'html-'+ options[i]; var html = document.getElementById( htmlId ); if ( (html == null) ) { continue; } if ( options[i] == chosen ) { html.style.display = 'inline'; } else { html.style.display = 'none'; } } return true; } function _getOption(radioObj) { for ( counter = 0; counter < radioObj.length; counter++) { if ( radioObj[counter].checked ) val = radioObj[counter].value; } radioObj.value = val; return val; } </script>
- D-Den
- お礼率33% (6/18)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
う～む… もともとは、イメージのサイズ制御だったのか、セレクトのオプションボタンだったのか、なんだかいろんな経緯のありそうなスクリプトですねぇ… それはさておき、対象を表示/非表示するだけでよいのなら、要素から表示したいdiv番号を直接呼び出すようにしてしまえば、呼び出し側の要素の種類は固定されずにすみます。 （極端な話、いろんな種類が混在していてもＯＫ） 呼び出し方は onclik="change(n)" みたいな感じ（nは表示したい要素番号） ＜サンプルです＞ <html> <head> <script type="text/javascript"> var disp=[]; window.onload=function(){ disp=document.getElementById('disps').getElementsByTagName('DIV'); for (var i=1; i<disp.length; i++) disp[i].style.display='none'; } function change(n){ for (var i=0; i<disp.length; i++) disp[i].style.display='none'; if (disp[n-1]) disp[n-1].style.display='inline'; } </script> </head> <body> ◆ラジオボタンの例 <div> <input type="radio" name="test" onclick="change(1)" checked />No.01<br /> <input type="radio" name="test" onclick="change(2)" />No.02<br /> <input type="radio" name="test" onclick="change(3)" />No.03 <p /> ◆イメージの例 <div> <button onclick="change(1)">No.01</button><br /> <button onclick="change(2)">No.02</button><br /> <button onclick="change(3)">No.03</button> </div> </div> <p /> ◆ボタンの例 <div> <img src="A.jpg" onclick="change(1)" /><br /> <img src="B.jpg" onclick="change(2)" /><br /> <img src="C.jpg" onclick="change(3)" /> </div> <hr> <div id="disps"> <div>テキスト０１</div> <div>テキスト０２</div> <div>テキスト０３</div> </div> </body> </html> 注） ・id="disps"の中のdiv要素が表示対象の要素と解釈されます。 ・一番初めは、最初の要素が表示された状態になります。 ・もとの質問文が display=none/inline の切り替えになっていたのでそのままにしてあります。（divだからblockだろとかいいっこなしです）
関連するQ&A
- ラジオボタンでうまくするには・・・・
初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>１</OPTION> <OPTION value=2>２</OPTION> <OPTION value=3>３</OPTION> <OPTION value=4>４</OPTION> <OPTION value=5>５</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で１・２・３・４・５のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">１袋<BR> <INPUT type="radio" name="name1" value="3900">２袋<BR> <INPUT type="radio" name="name1" value="5800">３袋<BR> <INPUT type="radio" name="name1" value="7500">４袋<BR> <INPUT type="radio" name="name1" value="8500">５袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。
- ベストアンサー
- HTML
- ラジオボタンの初期値について
いつも大変お世話になってます。 ラジオボタンで、ページが読み込まれたら、値によって、 選択されている状態にしようと思っているのですが、うまくいきません。 以下、ソース部分です。 ★javascript部分 addOnload(function() { var tantou9 = "<%=szei_hasu_kbn%>" var element9 = document.getElementById("hasu"); for (var i=0; i<element9.options.length;i++) { if(element9.options[i].value === tantou9){ element9.options[i].checked = true; break; }; }; }); addOnload(function() { var tantou10 = "<%=szei_zei_kbn%>" var element10 = document.getElementById("zei"); for (var i=0; i<element10.length;i++) { if(element10.item[i].value === tantou10){ element10.item[i].checked = true; break; }; }; }); 上は、プルダウンの時の処理を真似てるので、違うんだろうなとは思います。 例えば、element10[1].checked = true; だけを実行してもダメでした。 addOnload(function()部分は、他の処理はできるので、ここは間違ってないと思います。 ちなみにサーバーサイドはASPで、<%=szei_zei_kbn%>に値が問題なく入ってることは、 確認できてます。 ★HTML部分です。 <tr> <th> <b>端数</b> </th> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="0">四捨五入 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="1">切捨 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="2">切上 </td> </tr> <tr> <th> <b>税</b> </th> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=0>外税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=1>内税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=2>非課税 </td> </tr> どなたかご存知の方がいらっしゃいましたら、ご教授お願いします。 宜しくお願いします。
- ベストアンサー
- JavaScript
- ラジオボタンの入力制御について（表示した時のみ制御を行う）
yesの場合はid=ABを表示し、noの場合はid=ABを非表示にする制御を行っています。 両方yesの場合は表示。両方noの場合は非表示。 片方がnullの場合は、yesで表示しnoで非表示としています。 ここまでの動作は、問題ないのですが id=ABを表示した場合、hoge3が入力必須となり id=ABを表示しない場合、hoge3は入力必須ではないように制御を行いたいと思っています。 他書き込みを参考にしたのと、自身で書いたものが混じって非常に汚くなっていますが ご教授願えませんでしょうか。 <script type="text/JavaScript"> <!-- function test1(){ if(document.getElementById("id01").checked) { document.getElementById('AB').style.display = ""; }else if(document.getElementById("id02").checked) { document.getElementById('AB').style.display = ""; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } }else{ document.getElementById('AB').style.display = "none"; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } } } //以下はhttp://oshiete1.goo.ne.jp/qa2119460.htmlを参考にしました function test2(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="hoge3" && f[i].checked==true) return true; } alert("AかBを選んでください"); return false; } //--> </script> <form name="form1" onload="test1()"onsubmit="return test2(this)"> <br> <input type="radio" name="hoge1" value="1" id="id01" onClick="test1();">yes<br> <input type="radio" name="hoge1" value="0" onClick="test1();">no<br> <br> <input type="radio" name="hoge2" value="1" id="id02" onClick="test1();">yes<br> <input type="radio" name="hoge2" value="0" onClick="test1();">no<br> <br> <p id="AB" style="display:none;"> <input type="radio" name="hoge3" value="1">Aへ進む<br> <input type="radio" name="hoge3" value="2">Bへ進む<br> </p> <br> <input type="submit" value="次へ"> </form>
- ベストアンサー
- JavaScript
- Javascriptでラジオボタンとチェックボックスの値を足して計算し
Javascriptでラジオボタンとチェックボックスの値を足して計算しようとしました。 しかし、チェックボックス同士の値は足されるのですが、ラジオボタンの値は計算されずにそのまま表示されます。 ラジオボタンの値も足されるようにするにはどうしたら良いでしょうか。 よろしくお願いいたします。 javascript↓ function calc2() { var ss=""; var fs= document.forms; for (var f=0 ; f<fs.length ; f++) { //formが複数ある場合、formの数だけ繰り返し d = fs[f].elements; //dにform内のエレメントを代入 checkvalue = 0; //checkvalueの値を0にする。ここをcheckvalue = ""; にすると、文字列として扱われる for (var i = 0; i < d.length; i++ ) { //form内のエレメントの数だけ繰り返し if (d[i].checked == true) { //チェックボックスがチェックされていたら checkvalue += Number(d[i].value); //checkvalueの値（整数の場合）にそれぞれのエレメントの値（value）を追加していく } } ss += checkvalue; function addFigure(str) { //3桁のカンマ挿入 var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } var sss = addFigure(ss); //ssの値にカンマを挿入してsssに代入 } document.getElementById('ch_all').innerHTML = "\\" + sss; //html本文内のid="ch_all"の場所に書き出す } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンとプルダウンを連動させたい
ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語） 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 2段階ラジオボタン後、DIVを表示したい
色々と自力で試行錯誤しましたが、知識が足りません。 javaScriptのif構文とかswich構文の部分が問題かなぁ～と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。 1段目（ラジオ）＜バス＞＜電車＞ 2段目（ラジオ）＜バス/高級＞＜バス/普通＞ 2段目（ラジオ）＜電車/高級＞＜電車/普通＞ 3段目（DIV）＜高級バス＞＜バス＞＜高級電車＞＜電車＞ 2段目の動作がオカシイです。 連動している一方のみを表示したいです。（連動してないその他は、見えなくしたいです） 以下、ソースです。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <style type="text/css"> .second , .third{ display: none; } </style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('bus_high').style.display = 'none'; document.getElementById('bus_normal').style.display = 'none'; document.getElementById('train_high').style.display = 'none'; document.getElementById('train_normal').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } // --></script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタン→セレクトボックスで表示切替がしたい
次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。 参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>
- 締切済み
- JavaScript
- ラジオボタンの選択によって、スタイルシートを使い分けたい
皆様、ご指導宜しくお願い致します。 似た様な投稿もあり、チャレンジしてみてはいるのですがどうしても思うような動きができず四苦八苦しております。 やりたいのは、PHPのフォームでラジオボタンAとBの選択肢が有り、Aを選択された場合は、Bブロックを非表示にして、Bが選択された場合に、Aブロックを非表示したいんです。 どんな制御文を入れればいいのかわからず。。。 とんちんかんなことをしているかもしれませんが、皆様、お力をお貸し下さい。 <HTML> <HEAD> function expriMenu(pra){ if(pra=="0"){ } if(pra=="1"){ } } --> </HEAD> <BODY> <form name='pri1'> <input type='radio' name='000' value='A' onclick=\"javascript:expriMenu(0);\">A <input type='radio' name='000' value='B' onclick=\"javascript:expriMenu(1);\">>B <br> <br> <br> <br> <DIV id=priMenu style='DISPLAY: none'> ブロックＡ </DIV> <DIV id=priMenu style='DISPLAY: none'> ブロックＢ </DIV> </form> </BODY> </HTML> 宜しくお願い致します。
- ベストアンサー
- 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
お礼
ありがとうございます！ 自分が考えていた以上にシンプルなスクリプトで出来たのですね。 本当に助かりました!!