JavaScriptについてのちょっとしたこと

戻る
最終更新日 2002/11/22
2002/09/06
2002/07/30
2002/02/05
2002/01/17
2001/08/30
　推奨サイト

radioボタンについて

2001/08/30

　　一般的に"radioボタン"の値を取得するには以下の様なコードで説明される
　　場合が多いようです。

　
<SCRIPT LANGUAGE="JavaScript">
<!--
var radio_val = "" ;

function input_chk() {
　if (radio_val == "") {
　　alert ("チェックしてくださ〜い") ;
　}
}

function radio_v(r) {
　radio_val = r.value ;
}
//-->
</SCRIPT>
<FORM enctype="multipart/form-data" METHOD="POST" NAME=item>
　<input type=radio name=ra1 value="a" onClick="radio_v(this)">aという文字
　<input type=radio name=ra1 value="b" onClick="radio_v(this)">bという文字
　<INPUT TYPE=button VALUE="ＧＯ" onClick="return input_chk()">
</FORM>

　　このやり方は"radioボタン"の値を格納しておく変数をグローバルで設定しておき、
　　"radioボタン"がチェックされたタイミングでその値を格納するという方法です。
　　つまり、"radioボタン"がチェックされなければその値を永遠に取得できないという
　　ことになります。
　　この方法では初期設定として"checked"が指定されている"radioボタン"の値や、ブラ
　　ウザの"戻る"ボタンで戻った時の状態が取得できないのでページ内で入力のチェック
　　を行いたい場合は使えません。

　
<FORM enctype="multipart/form-data" METHOD="POST" NAME=item>
　<input type=radio name=ra1 value="a" checked onClick="radio_v(this)">aという文字
　<input type=radio name=ra1 value="b" onClick="radio_v(this)">bという文字
　<INPUT TYPE=button VALUE="ＧＯ" onClick="return input_chk()">
</FORM>



　　ページ内で入力のチェックを行いたい場合はどうするか？
　　そこで登場するのが"配列"という仕組みです。("テーブル"という言い方もあります)
　　"配列"についての細かい考え方は他の情報に譲るとして、簡単にいえば、同じ名前を
　　もった複数の入れ物です。
　　
　　この"配列"の仕組みを使えばこの問題は解決しますし、ひいては世界平和、商売繁盛、
　　景気拡大といいとこずくめです(ウソです、すいません)。
　　とにかく問題は解決します。


　
<SCRIPT LANGUAGE="JavaScript">
<!--
　var radio_val = "" ;

　function input_chk() {
　rv = "" ;
　if (document.item.ra1[0].checked) { rv = document.item.ra1[0].value ; }
　if (document.item.ra1[1].checked) { rv = document.item.ra1[1].value ; }
　if (rv == "") { alert ("チェックしてくださ〜い") ;}
　}
//-->
</SCRIPT>
　<FORM enctype="multipart/form-data" METHOD="POST" NAME=item>
　　<input type=radio name=ra1 value="a">aという文字
　　<input type=radio name=ra1 value="b">bという文字
　　<INPUT TYPE=button VALUE="ＧＯ" onClick="return input_chk()">
　</FORM>


　　ここで"radioボタン"の名前は"ra1"で、複数のチェック項目が同じ名前で存在します。
　　基本的には"radioボタン"は一つしかチェックできないので、最終的にはチェックされた
　　項目の値("value"の値)が結果となります。
　　が、しかし、実は"配列"を使うと個々の項目の値を取得できます。それが
　　

　　 ra1[0],ra1[1]

　　
　　です。

　　 ra1[0] は"aという文字"の項目です。
　　 ra1[1] は"bという文字"の項目です。

　　
　　つまり"<input type=radio name=ra1 〜"の記述順に0,1,2,3〜で番号が振られます。
　　ですから"<input type=radio name=ra1 〜"の行が１０行あると ra1[0]〜ra1[9]の配列として
　　参照することができます。
　　
　　
　　　＊おまけ

　　　もし"<input type=radio name=ra1 〜"の行がいっぱいあったとき（例えば５０行くらい）に
　　　"if (document.item.ra1〜" をその分書くのは大変です。(大変じゃない人もいますが)
　　　書くのは大変ですという前に html のソースが大きくなりページを表示するのによけいな時間が
　　　かかってしまいます（特に遅い回線を使っている人など）
　　　この場合は "for文"を使用しましょう。

　
<SCRIPT LANGUAGE="JavaScript">
<!--
　function input_chk() {
　　rv = "" ;
　　for (i=0;i<26;i++) {
　　　if (document.item.ra1[i].checked) {
　　　　rv = document.item.ra1[i].value ;
　　　}
　　}
　　if (rv == "") {
　　　alert ("チェックしてくださ〜い") ;
　　}
　}
//-->
</SCRIPT>
<center>
　<FORM enctype="multipart/form-data" METHOD="POST" NAME=item>
　　<input type=radio name=ra1 value="a">aという文字<br>
　　<input type=radio name=ra1 value="b">bという文字<br>
　　　　　　　　　　　：
　　<input type=radio name=ra1 value="x">xという文字<br>
　　<input type=radio name=ra1 value="y">yという文字<br>
　　<input type=radio name=ra1 value="z">zという文字<br>
　　<INPUT TYPE=button VALUE="ＧＯ" onClick="return input_chk()">
　</FORM>
</center>


ウインドーを閉じる

2002/01/17


こんな感じ

このウインドーを閉じます


サブウインドウを別ページで閉じる

2002/02/05




カウントダウン
2002/07/30

日付のカウントダウンの一つの方法

チップヘルプ
2002/09/06







ページ内でJump
2002/11/22