チェックボックスの利用
広告
ここではチェックボックスで選択された項目によって異なる動作を行うようにしてみます。基本的にラジオボタンの場合と同じです。
HTMLページ内に記述されたチェックボックスの値をJavaScriptで取得するにはDOMを用いることで可能です。各チェックボックスにIDを指定して個別に値を取得します。
<html> <head> <title>チェックボックステスト</title> </head> <body> <h1>チェックボックステスト</h1> <form> <input type="checkbox" id="ds" name="dscheck">NINTENDO DS<br> <input type="checkbox" id="ps3" name="ps3check">PlayStation3<br> <input type="checkbox" id="wii" name="wiicheck">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="checkbox" id="ds" name="dscheck">NINTENDO DS<br>
<input type="checkbox" id="ps3" name="ps3check">PlayStation3<br>
<input type="checkbox" id="wii" name="wiicheck">Wii<br>
<input type="button" value="ファイル読み込み" onClick="loadText()">
</form>
<div id="disp"></div>
</body>
</html>
まずHTMLページを表示すると次のように表示されます。
チェックボックスを1つ選択してからフォームのボタンをクリックするとチェックボックスに対応したファイルをサーバから読み込みHTMLページの指定の箇所を書き換えます。
他のチェックボックスを押した場合は次のようになります。
( Written by Tatsuo Ikura )
AjaxTower