checkboxオブジェクト
checkboxオブジェクトは、フォームのcheckboxに関する情報をJavaScriptのオブジェクトとして取り扱います。
チェックボックスの要素を取得する方法
同一グループに属するチェックボックスには同一の名前をつけるためindex番号を指定することにより個々のcheckboxオブジェクトを取得します。
document.フォーム名.チェックボックス名[index番号].value
同一グループのcheckboxオブジェクトの数はlengthプロパティにより取得できるのでチェックボックスの状態を全て確認する場合は、lengthプロパティにより数を取得してfor文を使用して順次アクセスします。
document.フォーム名.チェックボックス名.length
以下のサンプルはフォーム内のチェックボックスの選択状態をcheckedプロパティで判定して選択された値をメッセージボックスに表示しています。
<html>
<head>
<title>JavaScript checkbox</title>
<script type="text/javascript">
function checkFruit(){
var result = '';
var f = document.fm.fruit;
for(var i = 0; i < f.length; i++ ){
if(f[i].checked ){
result = result +' '+ f[i].value;
}
}
if(result){
alert(result+'を選択しました。');
}else{
alert('何も選択しませんでした。');
}
}
</script>
</head>
<body>
<form name="fm">
あなたの好きな果物は何ですか？<br>
<input type="checkbox" name="fruit" value="いちご">いちご<br>
<input type="checkbox" name="fruit" value="りんご">りんご<br>
<input type="checkbox" name="fruit" value="みかん">みかん<br>
<input type="checkbox" name="fruit" value="もも">もも<br>
<input type="checkbox" name="fruit" value="パイナップル">パイナップル<br>
<input type="button" value="確認" onclick="checkFruit()">
</form>
</body>
</html>
プロパティの設定方法
document.フォーム名.チェックボックス名[index番号].property
以下はcheckboxオブジェクトのプロパティの一覧です。
| プロパティ名 | 値 |
|---|---|
| checked | チェックされている状態 |
| defaultChecked | デフォルトでチェックされている状態 |
| length | オブジェクトの数 |
| name | オブジェクト名 |
| value | オブジェクト内の値 |
| type | オブジェクトのタイプ |
メソッドの設定方法
document.フォーム名.チェックボックス名[index番号].method()
以下はcheckboxオブジェクトのメソッドの一覧です。
| メソッド名 | 機能 |
|---|---|
| click() | クリック |
| toString() | オブジェクトを文字列に変える |
| blur() | フォーカスを移動する |
| focus() | フォーカスを与える |
| valueOf() | オブジェクトの値を返す |
| handleEvent | イベント取扱者を特定する |
| toSource | オブジェクトの値を文字列で返す |
| 関連メンバ | 内容 |
|---|---|
| Text | テキストボックス |
| Textarea | テキストエリア |
| Select | 選択・リストボックス |
| Radio | ラジオボタン |
| Buttom | ボタン |
| Submit | 送信ボタン |
| Reset | リセットボタン |
| Hidden | 隠しフィールド |
| Password | パスワード入力ボックス |
| File | ファイル選択ボックス |