JavaScriptのラジオボタンの使い方について

このQ&Aのポイント
  • JavaScriptを使用したラジオボタンの使い方についてアドバイスをお願いします。
  • ラジオボタンの内容をデータベースによって変更する場合におけるエラー対策について教えてください。
  • 特定の選択肢しかない場合にもエラーにならないラジオボタンの書き方についてご教示いただけますか。
回答を見る
  • ベストアンサー

for ( i = 0; i ・・の使い方?

下記は普通に動きますが、ラジオボタンの内容をデータベースによって変更しているためボタンが1個だけの場合があります。その場合にもエラーにならない書き方についてアドバイスいただけないでしょうか。 <SCRIPT language=JavaScript> function set( n ) { for ( i = 0; i < document.main.shori.length; i++ ) { if ( document.main.shori[i].checked ) { shori_value = document.main.shori[i].value } } alert(shori_value) } </SCRIPT> <body onLoad="set(0);"> <FORM NAME=main> <INPUT TYPE="RADIO" NAME="shori" VALUE="1" onClick="set(0);" CHECKED>1  <INPUT TYPE="RADIO" NAME="shori" VALUE="2" onClick="set(1);">2 </form>

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

  • ベストアンサー
noname#199778
noname#199778
回答No.1

おはようございます。 スクリプトを、以下のようにしてみてはいかがでしょうか。 var shori_value; function set( n ) { if (document.main.shori.length){ for ( i = 0; i < document.main.shori.length; i++ ) { if ( document.main.shori[i].checked ) { shori_value = document.main.shori[i].value; } } } else { if(document.main.shori.checked){ shori_value = document.main.shori.value;} } alert(shori_value) } 上では、if(document.main.shori.length){}という条件で条件分岐を設定しています。 document.main.shori.lengthは、フォーム部品のラジオボタンが配列としてソートされている場合には真を返しますので、複数のラジオボタンが並んでいるときにはこれ以下の処理を実行します。 もし、ラジオボタンが一つしかない場合は、それは配列としてソートされないため、document.main.shori.lengthは未定義となり、偽を返すはずなので、そこでエラーを回避できると思います。 あとは、else文でラジオボタンが一つのケースで、そのラジオボタンがチェックされているかどうかと、チェックされている場合にそのvalue値を返す処理を別に用意してやれば良いのではないでしょうか。 参考になれば幸いです。 見当違いでしたらごめんなさい。

s-holmes
質問者

お礼

回答ありがとうございました。 >document.main.shori.lengthは、フォーム部品のラジオボタンが配列としてソートされている場合には真を返しますので 上記丁寧な解説ありがとうございました。 自分で書いてはいても、コピー多用で、意味がわかっていない状態であることがよくわかりました。 (^^; おかげ様で目的が達成できました。

関連するQ&A

  • なぜエラー?

    いつもコピペでjavascriptを活用しています。 (^^; 下記の2個のRADIOボタンのうち1個を削除するとエラーになります。なぜ? <script Language="JavaScript"> <!-- function set( n ) { document.main.Submit.value = document.main.shori[n].value; } // --> </script> <FORM name="main"> <INPUT TYPE="RADIO" NAME="shori" VALUE="修正" onClick="set(0);" CHECKED> 修正 <INPUT TYPE="RADIO" NAME="shori" VALUE="複写" onClick="set(1);"> 複写 <INPUT TYPE="SUBMIT" NAME="Submit" > </FORM>

  • ラジオボタンでreadonlyの切替え

    ラジオボタンでreadonlyの切替えをしたいのですが、どうもうまくいきません。ラジオボタンの値の拾い方でつまづいているようです。 <script Language="JavaScript"> <!-- function set( n ) { document.main.Submit.value = document.main.elements[n].value; document.main.Submit.style.backgroundColor = document.main.elements[n].style.backgroundColor; document.main.年月日.value = 'やっほ'; document.main.年月日.style.background = 'white'; if (document.main.shori.value = '複写'){ document.main.年月日.readOnly = ''; alert(document.main.shori.value); } else if (document.main.shori.value = '修正'){ alert(document.main.shori.value); document.main.年月日.readOnly = ture;} } // --> </script> <FORM NAME=main ACTION="★" METHOD="POST"> <INPUT TYPE="RADIO" NAME="shori" VALUE="修正" CHECKED onClick="set(0);">修正 <INPUT TYPE="Radio" NAME="shori" VALUE="複写" onClick="set(1);">複写<BR> <INPUT TYPE="text" NAME="年月日" SIZE="20" VALUE="" readonly style="background-color : #FFCCCC;" style="ime-mode: inactive"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>

  • 選択したたラジオボタンの値を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>

  • 選択によってsubmitボタンの色を変える

    先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。 <html> <head> <script Language="JavaScript"> <!-- function set( n ) { document.myFORM.Submit.value = document.myFORM.elements[n].value; } // --> </script> </head> <body onLoad="set(0);"> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink"> </form> </body> </html>

  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックの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"> ---------------------------------------

  • 動画の入れ替えについて

    お世話になります 以下のような画像入れ替えを使ってフラッシュなどの動画入れ替えは可能なのでしょうか 宜しくお願いします <SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript非対応ユーザーの為に function irekaeA(){ if (document.form1.pars[0].checked){ document.parsga.src="3-1.jpg" }else{ if (document.form1.pars[1].checked){ document.parsga.src="3-2.jpg" }else{ if (document.form1.pars[2].checked){ document.parsga.src="3-3.jpg" }else{ if (document.form1.pars[3].checked){ document.parsga.src="3-4.jpg" }else{ if (document.form1.pars[4].checked){ document.parsga.src="3-5.jpg" }else{ document.parsga.src="3-6.jpg" } } } } } } // --> </SCRIPT> <FORM NAME="form1"> <INPUT TYPE="radio" NAME="pars" VALUE="pars1"onclick="irekaeA()" CHECKED>sample1 <INPUT TYPE="radio" NAME="pars" VALUE="pars2"onclick="irekaeA()">sample2 <INPUT TYPE="radio" NAME="pars" VALUE="pars3"onclick="irekaeA()">sample3 <INPUT TYPE="radio" NAME="pars" VALUE="pars4"onclick="irekaeA()">sample4 <INPUT TYPE="radio" NAME="pars" VALUE="pars5"onclick="irekaeA()">sample5 <INPUT TYPE="radio" NAME="pars" VALUE="pars6"onclick="irekaeA()">sample6 </FORM><BR> <IMG SRC="3-1.jpg" NAME="parsga" width="550" height="405">

  • ラジオボタンの選択項目によってコメントを表示する方法

    ラジオボタンの「Yes・No」にチェックすると、チェックした項目別に欄外にコメントを表示するページを作成しました。 初心者のため、Q1~Q15までcheckの方法を延々と書いたのですが、もっと簡単に書く方法はありますでしょうか? 参考にQ1・Q2の分を掲載させていただきます。 ぜひ、教えてください。よろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- function check(){ if (document.form1.q1[0].checked){ document.form1.q1com.value="減量しましょう"; } if (document.form1.q1[1].checked){ document.form1.q1com.value="引き続き注意を"; } if (document.form1.q2[0].checked){ document.form1.q2com.value="再検査を受けましょう!"; } if (document.form1.q2[1].checked){ document.form1.q2com.value="チェックしましょう"; } // --> </SCRIPT> <INPUT type="radio" name="q1"> Yes <INPUT type="radio" name="q1"> No <INPUT size="41" type="text" name="q1com"> <INPUT type="radio" name="q2"> Yes <INPUT type="radio" name="q2"> No <INPUT size="44" type="text" name="q2com"> <INPUT type="button" value=" 診断ボタン " onclick="check();>

  • ラジオボタンの値を・・・・・

    <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」というのが表示されます。 どうすれば、「男」または「女」という値を表示させることができますか? ちなみにこれは、「○○○.html」で保存します

  • Firefoxのdisabledプロパティのバグ?

    複数のラジオボックスがあり、すべてのラジオボタンで 「YES」がチェックされた時にだけ、submitボタンが 有効になるようJavaScriptで制御できればと思ってます。 素人ながら以下のようなJavascriptにしたところ、 IEやSafari、Chromeでは意図した通り動作しましたが、 ただFirefoxのみボタンがdisabledになったまま有効になりませんでした。 解決策がわかる方がいらっしゃればご教授お願いできればと思います。 よろしくお願い致します。 <script type="text/javascript"> <!-- function check() { if (form1.radio1[0].checked && form1.radio2[0].checked && form1.radio3[0].checked) { form1.send.disabled = false; } else { form1.send.disabled = true; } } ; //--> </script> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form>

  • HTAとVBSでのアプリケーションについて

    HTAとVBSで簡単なプログラムを作っているのですがどうしても ライン:13 文字:1 オブジェクトがありません。:'document.anim.se(..)checked' となってしまいます。 詳しい方がいらっしゃれば、どのように直せば動くかご教授ください。 <html> <head> <script language="VBScript"> <!-- Option Explicit Dim i,test1 Sub Ctrl() Do If document.anim.se(i).checked = True Then test1 = document.anim.se(i).checked.Value End If i = i + 1 Loop Until i = 4 Msgbox(test1) End Sub --> </script> <body> <form name="anim"> <input type="radio" name="se" value="neko" checked>猫<br> <input type="radio" name="se" value="inu">犬<br> <input type="radio" name="se" value="tora">虎<br> <input type="radio" name="se" value="tyou">蝶<br> </form> <form> <input type=button onclick="Ctrl():" value="GO"> </form> </body></html>