JavaScriptを用いたホームページ[ラジオボタン]

ポイント1)フォームおよび部品の名前を定義する。

ポイント2)JavaScriptを記述する。

ポイント3)アクションの追加 onClick="2)のファンクション名"


作成場所: X:ドライブのフォルダー「学籍番号f」 ファイル名:rei5.htm (あらかじめ画像ファイルは同フォルダーにコピーしておくこと)

例題5完成品はここをクリック

Step1)フォームおよび部品の名前を定義する。

例題におけるフォーム名:F1 (注意:フォームは1つ。2つ以上に分けないこと。)

部品type radio radio button
name R1 R1 push
value up.gif down.gif 表示

注意!raioの部品は、2つともR1です。radioボタンの場合、どちらかをクリックしてチェックすれば、もう一方は、 はずれます。これができるためには、部品は1つ(両方ともnameが同じ)で無ければありません。

 なお、nameが同じですから、上のradio部品と下のradio部品を分けるためには、配列[]というものを使い、R1[0](最初に定義したもの)、R1[1](次に定義したもの)、R1[2]、・・・という形で使います。

Step2)JavaScriptを記述する。

JavaScript
<script type="text/javascript">
function func() {
if (document.F1.R1[0].checked) {alert(document.F1.R1[0].value)}
if (document.F1.R1[1].checked) {alert(document.F1.R1[1].value)}
}
</script>

上では、アラート窓が出てきて、それぞれのvalue(document.F1.R1[0].value、document.F1.R1[1].value)、すなわち、up.gifかdown.gifかを表示させる文法になっており、例題1〜3のような画像が変わる様にはなっていない。 とりあえず、上の文で完成させ、例題4のような動作を確認します。

この段階での例題5はここをクリック

その後、例題3を参考にしながら、それぞれのalert()の文の前に、画像のsrcをup.gifかdown.gifにする式(文法)を追加しなさい。(画像の名前を必ず付けること。)
なお、式と式の間は、;を入れること。たとえば、 if (document.F1.R1[0].checked) { 例題3の画像のsrcを変える式;alert(document.F1.R1[0].value)}とします。

例題5完成品はここをクリック

Step3)アクションの追加 onClick="2)のファンクション名"

部品type button
name push
value 表示
アクション onClick="func()"