radioボタンはnameが一緒なので、JavaScriptで値を取得するときに、通常の方法だとできません。
[参考記事] radioタグの説明（フォームタグのまとめ）
radioボタンで選択肢が複数の場合は配列となるので下記のようにするといいでしょう。
<INPUT TYPE="radio" NAME="q" VALUE="1">1
<INPUT TYPE="radio" NAME="q" VALUE="2">2
<INPUT TYPE="radio" NAME="q" VALUE="3">3
<INPUT TYPE="submit" VALUE="送信">
</FORM>
<SCRIPT TYPE="text/javascript">
<!--//
function check(){
if(document.form1.q.length) { // 選択肢が複数ある場合
var i;
for(i = 0; i < document.form1.q.length; i ++){
if(document.form1.q[i].checked){
alert("選択した値は" + document.form1.q[i].value + "です。");
return false;
}
}
alert("なにも選択されてません。");
return false;
}else{ // 選択肢が1つだけの場合
if(!document.form1.q.checked){
alert("選択した値は" + document.form1.q.value + "です。");
return false;
}
alert("選択されてません。");
return false;
}
}
// -->
</SCRIPT>
サンプル
ユーザビリティを考えるとlabelタグをつけたほうがいいです。
「1番を選択」の文字をクリックするとradioボタンも反応します。
<INPUT TYPE="radio" NAME="q_label" VALUE="1" id="q_label1"><label for="q_label1">1番を選択</label>
<INPUT TYPE="radio" NAME="q_label" VALUE="2" id="q_label2"><label for="q_label2">2番を選択</label>
文字にマウスを合わせたときに指マークにするとより分かりやすいです。
下記がそのスタイルシート
cursor: pointer;
}
サンプル
同じ理由で<input type="submit" />、<button>〜</button>にも指マークがつくようにしたほうが分かりやすいです。
cursor: pointer;
}
個別に指定する場合は下記をタグ内に書きます。(サンプルは違いが分かるようこの方法です。)
クラスで指定する場合は次のようになります。
cursor: pointer;
}
<INPUT TYPE="submit" VALUE="送信" class="submit" />
サンプル
<input type="submit" />
<button>〜</button>
作る側は、そこにlabelタグがあるのを知っているからクリックできると思ってしまいますが、初めてサイトを見た人は意外とクリックできることに気づかないのです。
気づかれなければ、せっかくlabelタグを書いても無駄になります。
[教訓]モノは使われて初めて価値が出る。
radioボタンを標準で選択する。
<INPUT TYPE="radio" checked="checked">
この場合、checkedだけでもできますが、xhtmlの正しい表記ではありませんので、なるべくchecked="checked"とするのがいいです。
下記のようにしてるものは実はchecked="〜"を省略してたんですね。
