ラジオボタンの選択をチェックする


ブラウザ
Internet Explorer Netscape Firefox Opera
参考
JavaScriptの基本

ラジオボタンの選択状況をチェックするスクリプトです。

はい いいえ その他

(サンプルのためHTMLファイルにリンクしています)


ソース

<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript"> 
<!-- 

function check(){

	var flag = 0;


	// 設定開始(チェックする項目を設定してください)

	if(document.form1.question1.length) { // 選択肢が複数ある場合

		flag = 1;
		var i;

		for(i = 0; i < document.form1.question1.length; i ++){

			if(document.form1.question1[i].checked){

				flag = 0; break;

			}

		}

	}
	else{ // 選択肢が1つだけの場合

		if(!document.form1.question1.checked){

			flag = 1;

		}

	}

	// 設定終了


	if(flag){

		window.alert('選択されていません'); // 選択されていない場合は警告ダイアログを表示
		return false; // 送信を中止

	}
	else{

		return true; // 送信を実行

	}

}

// -->
</script>

</head>
<body>

<form method="POST" action="example.cgi" name="form1" onSubmit="return check()">

<p>
<input type="radio" name="question1" value="yes">はい
<input type="radio" name="question1" value="no">いいえ
<input type="radio" name="question1" value="other">その他
</p>

<p><input type="submit" value="送信"></p>

</form>

</body>
</html>

解説

<head> 〜 </head> 内にスクリプトを記述しておき、フォームの送信時にスクリプトを実行します。

上記の例は、フォームの送信ボタンを押したときに選択状況を確認しています。選択されていなければ警告ダイアログを表示して送信を中止し、選択されていれば送信を実行します。

※このチェック方法は、ラジオボタンで使用できます。

// 設定開始// 設定終了 の部分で、チェックする項目を設定してください。

document.フォーム名.フィールド名

フォーム名 … formタグの name="" で指定した名前(上記の例では form1
フィールド名 … フィールドの name="" で指定した名前(上記の例では question1

上記のように書かれた部分をすべて設定してください。

送信するときにスクリプトを実行するので、formタグに onSubmit="return check()" を指定しています。

青い文字の部分は、必要に応じて書き換えてください。