ラジオボタンの利用
広告
ここではラジオボタンで選択された項目によって異なる動作を行うようにしてみます。
HTMLページ内に記述されたラジオボタンの値をJavaScriptで取得するにはDOMを用いることで可能です。各ラジオボタンにIDを指定して個別に値を取得します。
<html> <head> <title>ラジオボタンテスト</title> </head> <body> <h1>ラジオボタンテスト</h1> <form> <input type="radio" id="ds" name="game">NINTENDO DS<br> <input type="radio" id="ps3" name="game">PlayStation3<br> <input type="radio" id="wii" name="game">Wii<br> <input type="button" value="ファイル読み込み" onClick="loadText()"> </form> <div id="disp"></div> </body> </html>
上記のようなHTMLページがあった場合に、ラジオボタンの各値が選択されているかどうかを調べるには次のように行います。
var flagDs = document.getElementById("ds").checked;
var flagPs2 = document.getElementById("ps3").checked;
var flagWii = document.getElementById("wii").checked;
後は取得した値に対応した処理を行うだけです。
サンプルページ
今回はHTMLページ内のフォーム上のボタンをクリックすると、ラジオボタンで現在選択されている値に対応したファイルをサーバから読み込み、そのファイルの中身を指定した位置に表示するようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ラジオボタンテスト</title>
<script type="text/javascript">
<!--
var xmlHttp;
function loadText(){
var flagDs = document.getElementById("ds").checked;
var flagPs3 = document.getElementById("ps3").checked;
var flagWii = document.getElementById("wii").checked;
var fileName = "";
if (flagDs == true){
fileName = "http://www.ajaxtower.jp/sample/ds.txt";
}else if (flagPs3 == true){
fileName = "http://www.ajaxtower.jp/sample/ps3.txt";
}else{
fileName = "http://www.ajaxtower.jp/sample/wii.txt";
}
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = null;
}
}
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", fileName, true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var node = document.getElementById("disp");
node.innerHTML = xmlHttp.responseText;
}
}
// -->
</script>
</head>
<body>
<h1>ラジオボタンテスト</h1>
<form>
<input type="radio" id="ds" name="game">NINTENDO DS<br>
<input type="radio" id="ps3" name="game">PlayStation3<br>
<input type="radio" id="wii" name="game">Wii<br>
<input type="button" value="ファイル読み込み" onClick="loadText()">
</form>
<div id="disp"></div>
</body>
</html>
まずHTMLページを表示すると次のように表示されます。
ラジオボタンを1つ選択してからフォームのボタンをクリックするとラジオボタンに対応したファイルをサーバから読み込みHTMLページの指定の箇所を書き換えます。
他のラジオボタンを押した場合は次のようになります。
( Written by Tatsuo Ikura )
AjaxTower