WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ラジオボタンからValueを受け取る方法

ひよこ [MAIL] [WriteDate : Thu Dec 7 18:25:11 2000]

実は、先日ここで質問しようと考えていたのですが、色々調べていて自己解決してしまいました。
あまりにもスマートに出来たので、ここで公開しようと思います。
(こんなの常識だ!と思われた方、つっこみはご勘弁を(^_^;; )
ZSPCの過去ログとかも覗いたらMugiさんの方法とかもありましたが
初期状態でCheckedを付けたくなかったのとボタンの数が300個以上と
ものすごい数だったので採用できませんでした。以下サンプルリストです。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>Radio button getValue</TITLE>
<SCRIPT language=JavaScript>
<!--
function check_value(adr){
    ans = adr;
    document.myForm.r_value.value = ans;
    }
function send_value(){
    if (!document.myForm.r_value.value){
    ans = "チェックがされていません";
    }
    alert(ans);
    }
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myForm">
<center>ラジオボタンからValueを受け取ります。<br><br>
<br><br>
<input type=radio name="chois" value="1です" onClick="check_value(this.value)">1<br><br>
<input type=radio name="chois" value="2です" onClick="check_value(this.value)">2<br><br>
<input type=radio name="chois" value="3です" onClick="check_value(this.value)">3<br><br>
<input type=radio name="chois" value="4です" onClick="check_value(this.value)">4<br><br>
<input type=radio name="chois" value="5です" onClick="check_value(this.value)">5<br><br>
<input type=text name="r_value" >
<input type=button name="click" value="選択したチェックのValueを送信" onClick="send_value()">
</form>
</BODY>
</HTML>

textboxはラジオボタンにcheckedがあった場合のダミーです。(エラー回避)
確実にチェックをする場合は特に必要ないです。
私の場合必要なかったので付けませんでした。
勿論その場合

    document.myForm.r_value.value = ans;
と if文はいらないです。

皆さんのご意見宜しく!





ひよこ [MAIL] [WriteDate : Thu Dec 7 19:00:43 2000]

あ!</center>タグ忘れてる(笑)

わごな [MAIL] [URL] [WriteDate : Fri Dec 8 01:19:10 2000]

valueの送信が目的?
クリックするたびにテキストボックスに表示する必要がなければ
こんなのはどうでしょうか?
checkedの有無は問いません

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>Radio button getValue</TITLE>
<SCRIPT language=JavaScript> 
<!-- 
function send_value(){ 
  for(ix=0 ; ix<document.myForm.chois.length ; ix++) {
    if(document.myForm.chois[ix].checked) break;
  }

  if(ix >= document.myForm.chois.length) {
    ans = 'チェックがされていません';
  } else {
    ans = document.myForm.chois[ix].value;
  }

  alert(ans);
}
//--> 
</SCRIPT> 
</HEAD>
<BODY>
<FORM name="myForm"> 
<center>ラジオボタンからValueを受け取ります。<br><br>
<br><br> 
<input type=radio name="chois" value="1です">1<br><br>
<input type=radio name="chois" value="2です">2<br><br>
<input type=radio name="chois" value="3です">3<br><br>
<input type=radio name="chois" value="4です">4<br><br>
<input type=radio name="chois" value="5です">5<br><br>
<input type=button name="click" value="選択したチェックのValueを送信" onClick="send_value()"> 
</form>
</CENTER>
</BODY>
</HTML>

NC4.7とIE5.1で確認しました

ひよこ [MAIL] [WriteDate : Fri Dec 8 03:20:59 2000]

>valueの送信が目的? 
ええ、そうです。
forループですね。これと同じかどうかはわかりませんがMugiさんとこで発見しました。(^_^;
ただ、今回ボタンの数が莫大に多くて時間がかかるのでは?と思いちょっとためらいました。
もちろん、forループは試してないのでどうかわからないんですけど。
テキストエリアは最初無かったのですがボタン数が多いので、今どれにチェックを入れているのかが
常にわかるような形になり、丁度良かったんです。
わごなさんのスクリプトも今後参考にさせていただきます。
(ラジオボタンを使う頻度は少ないんですが)


わごな [MAIL] [URL] [WriteDate : Fri Dec 8 23:49:10 2000]

数が多いとテキストエリアの表示が役に立ちそうですね

forループの回数は実際試さないとわかりませんが
合計で200回ぐらいまわる3重ループを作った時は
気にならなかったので問題にならないと思います

わごな [WriteDate : Fri Dec 8 23:54:28 2000]

追記:
300個以上あるinputタグのあたりも
valueと説明のテキストを配列で用意して
javascsriptで書いてしまうとhtmlのファイルサイズが節約できそうですね(メンテも楽に・・なるかなぁ?)
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]