ラジオボタンのnameに別々の文字列を入れてもグループにするには？
- ラジオボタンのnameに異なる文字列を入れても、グループにする方法について教えてください。
- 商品名と価格をラジオボタンで選択したい場合、それぞれ異なるnameを使用しても選択が可能になってしまいます。
- 正しい選択方法について教えてください。
- ベストアンサー
ラジオボタンのnameに別々の文字列を入れてもグループにするには？
ラジオボタンのnameに別々の文字列を入れてもグループにするには？ 前回こちらで、チェックボックスとラジオボタンの値を合計する方法を教えていただきました。 これで、ラジオボタンのnameを任意の文字列にした場合、グループにならないので全部選択できてしまいます。 nameを商品名、valueを価格として使いたいので、任意のnameを使用かつ一つだけ選択させるにはどうしたらよいでしょうか。 こちらの質問が正解に近いのかなと思いますが、どのように応用したらいいのかわかりません。http://okwave.jp/qa/q796874.html ご助言頂ければ幸いです。よろしくお願いいたします。 javascript(test_checked2.js)↓ function calc2() { var i = 0, f, frms = document.forms; var j, el, total = 0, num; while (f = frms[i++]) { j = 0; while (el = f.elements[j++]) { if (el.checked && (el.type == 'radio' || el.type == 'checkbox') && !isNaN(el.value)) total += 1 * el.value; } } num = total.toString(); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); document.getElementById('ch_all').innerHTML = '\\' + num; } 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>
- Xxxxsakura
- お礼率100% (7/7)
- JavaScript
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
回答じゃないけど参考までに。 ＞nameに別々の文字列を入れてもグループにするには？ これはめんどうくさそう。それにHTMLで出来る事をわざわざ出来ないようにしておいてjavascriptで元に戻すって無駄。 nameはやはり合わせておいて value="商品名:価格" みたいにしてvalueを扱うときに商品名と価格に分割した方がまだ楽そう。 あるいは <label onclick="calc2()"><input type="radio" name="test" value="34500">商品名１</label> <label onclick="calc2()"><input type="radio" name="test" value="15000">商品名２</label> こんな感じにしておいてテキストから商品名を取得するとか。 （ラジオボタンやチェックボックスにはlabelをちゃんと付けるととっても操作がしやすくなるのでおすすめ）
その他の回答 (4)
- yambejp
- ベストアンサー率51% (3827/7415)
そもそも、クライアントから送られてくる「価格」は不正に修正されている 可能性が高いと理解する必要があります。 商品に関する個別の情報はサーバー側でデータをもっていればよいので、 価格自体を送らせる必要は皆無です。 なので、商品のIDと数量だけ送る仕組みにすれば何の問題もありません。 javascriptでバリデートするのであれば、別途配列で価格表をつくっておけば radioなどのvalueに埋め込む必要はありません。 いずれにしてもradioで処理するのにnameを無理やり変えて処理するのは 無駄ばかり多くて得るものがなく、やるべきではないことの代表のようなものです。
お礼
ご回答ありがとうございます！ 商品に関する個別の情報をサーバーで…ショッピングカートを用意しないといけませんね。 そこまで本格的な開発は考えていませんでした、すみません。 radioを改変するのはやはり無謀なようですのでやめます。 配列で価格表、参考にさせていただきます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
私ならclassで分類してみますが。
お礼
ご回答ありがとうございます！ クラスの使い方が良く分かりません。 もっと勉強しないとだめですね。
- fujillin
- ベストアンサー率61% (1594/2576)
グルーピングをスクリプトで管理すればよいのでしょうけれど、もともと備わっている機能をわざわざ作成するよりも、本来の機能に任せるほうが良さそうな気が… ＞nameを商品名、valueを価格として使いたいので、～ nameをグルーピングに、valueを「商品名 価格」にすれば、小細工をしなくてもすむのでは？
お礼
ご回答ありがとうございます！ そうですね、元々ある機能を作り直すとか無謀でした。 valueを「商品名 価格」にする方法で考えてみます。
- yyr446
- ベストアンサー率65% (870/1330)
同じグループのラジオボタンは、同じNAME属性にしないと、 ラジオボタン（一つだけ選ばせる）の機能を持たせる事は出来ません。 どのラジオボタンがチェックされたかは、nameじゃなくて、value で判断する。価格も一緒にとりたかったら、 value="['商品A','34500']" 見たいにして、アンシリアライズすれば、どうでしょう。
お礼
ご回答ありがとうございます！ そうですよね、やっぱり同じNAME属性じゃないと無理ですよね…。 valueに商品名と価格を設定して、計算するときは価格だけ、メール送るときは両方受け取る方法を考えてみます。
関連するQ&A
- 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
- ラジオボタンの値
プログラミング初心者です。ラジオボタンの値を数値として取得して、それを計算に活かしたいのですが、、、うまくいきません。radioChange()で数値を取得したのですが、calcでその変数を使うには以下でおかしいでしょうか？ よろしくおねがいしますm(__)m <html> <body onload="radioChange()"> <SCRIPT LANGUAGE="JavaScript"> function radioChange(num) { xx = num.value; xx = parseInt(xx); } function calc() { radioChange(); document.write(xx * 100); } </SCRIPT> <form name="form1"> <input type="radio" name="radio1" value="1" onclick="radioChange(this)"> <input type="radio" name="radio1" value="2" onclick="radioChange(this)"> <input type="radio" name="radio1" value="3" onclick="radioChange(this)"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 複数のラジオボタン選択肢によりsubmitを押せなくする
初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。 １：● ２：○ １：● ２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
- ラジオボタンとチェックボックスの計算について
ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">～</script>の間が間違っていると思うのですがどうでしょうか？ 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。（複数選択可）<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色？<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか？<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年～10年<br> <input name="ch6" value="3" type="radio">9年～5年<br> <input name="ch6" value="1" type="radio">4年～3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>
- ベストアンサー
- JavaScript
- ラジオボタンの値を・・・・・
<html> <head> <script language="javascript"> function osu(){ document.form1.text1.value=document.form1.radio1.value; } </script> </head> <body> <form name="form1"> <input type="radio" name="radio1" value="男" checked>男 <input type="radio" name="radio1" value="女">女 <input type="button" value="押す" onClick="osu()"> <input type="text" name="text1"> </form> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 上記のプログラムは、選択されたラジオボタンの値をテキストボックスに表示させるプログラムなんですが、何故かラジオボタンの値が表示されず、「undefined」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか？ ちなみにこれは、「○○○．ｈｔｍｌ」で保存します
- 締切済み
- JavaScript
- ラジオボタンを押して計算結果を出した後、全てをｎｕｌｌ値に戻すには？
初心者ながらがんばっています。どうか宜しくお願いします。 <HTML> <head> <script language="JavaScript"> <!-- function calc(radio, form) { form.OUT.value = form.IN.value * radio.value; } //--> </script> </head> というスクリプト内容で、 計算する数値:<input type=TEXT name="IN" size=10 value=0> <input type=RADIO name="MODE" value="3.14" onClick="calc(this,this.form)"> cm 計算結果:<input type=TEXT name="OUT" size=10 value=0 style="text-align:right"> cm このラジオボタンをクリアして、計算する数値と計算結果の場所をブランクにするには、どのように組めば良いのでしょう。onclickを使うことは解るのですが、どんなふうに組んでも、うまく動作しません。
- ベストアンサー
- 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
- ラジオボタンで選択変更
ラジオボタンで選択した背景色に変更する方法はわかったのですが。。。 「★ラジオボタン」で、 「ページの移動」(別のページ)するには、どうしたらいいのでしょうか???(↓この方法でなくてもいいです。。。) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <SCRIPT language="JavaScript"> <!-- function changeColor(num){ if(num==0){ document.bgColor="#ffffff"; }else if(num==1){ document.bgColor="#ffcccc"; }else if(num==2){ document.bgColor="#ccffcc"; }else if(num==3){ document.bgColor="#ccccff"; } } // --> </SCRIPT> <BODY> <CENTER> <FORM> <INPUT type="radio" name="bgradio" checked onClick="changeColor(0)">white <INPUT type="radio" name="bgradio" onClick="changeColor(1)">red <INPUT type="radio" name="bgradio" onClick="changeColor(2)">green <INPUT type="radio" name="bgradio" onClick="changeColor(3)">blue </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 複数のラジオボタンのチェック
複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか？ 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0～4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------
- ベストアンサー
- JavaScript
- nameにハイフンを入れてラジオボタン未選択を判定したい
Javascriptにてひとつ問題が起こりました。 2つのラジオボタンがあり、どちらも選択せずに選択ボタンを押した時、「どちらかを選択して下さい」とメッセージが出るようにしたいです。 Javascriptは、nameにハイフンが入っていると動作しないようですが、nameにハイフンを入れて動作させなくてはならない状況です。 （nameにハイフンを入れなければ動作するのですが・・・） 私が調べたところ、下記のスクリプトでは、["SELECT-1"]や['SELECT-1']に変更しても動作しませんでした。 下記のスクリプトを別の書き方に変更すれば可能なのかもわかりませんが、詳しくないので書けません。 nameにSELECT-1（途中にハイフンがあり、その後に数字が続きます）を使って可能な記述方法がございましたら、教えて下さい。 下記のような記述ではなくても、nameがSELECT-1で動作するのであれば、変更しても構わないです。 ご存知の方、教えて下さい！ どうぞよろしくお願い致します。 <html> <head> <script language="javascript"> <!-- function choice(){ if((document.form1.SELECT-1[0].checked==false)&& (document.form1.SELECT-1[1].checked==false)) alert("どちらかを選択して下さい"); } </script> </head> <body> <form name="form1"> <input type="radio" name="SELECT-1" value="A">A <input type="radio" name="SELECT-1" value="B">B <input type="button" value="選択" onClick="choice()"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます！ やっぱり、ラジオボタンの機能をわざわざ使えなくするのは無駄ですよね。反省。 labelを使ってテキストから商品名を取得するのは、まったく考えていなかったので、とても参考になります。詳しく調べてみます。