JavaScriptでラジオボタンのチェック状態を設定します。
JavaScriptでラジオボタンのチェック状態を取得するには、ラジオボタンのオブジェクトのcheckedプロパティに代入します。
| 値 | 意味 |
|---|---|
| true | ラジオボタンはチェックされている |
| false | ラジオボタンはチェックされていない |
ラジオボタンのチェック状態をidで参照する場合は下記の記述になります。
document.(参照するフォームのname).(参照するラジオボタンのid).checkedの記述でもアクセスできます。テキストボックスやチェックボックスのコントロールはnameから取得できますが、
ラジオボタンの場合は同じラジオボタングループにする場合、nameの値を同じにするため、nameからの取得は利用できない状況が多いです。
先に紹介したIDからチェック状態の取得をします。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function onButtonClick1() {
document.form1.Radio1.checked = true;
}
function onButtonClick2() {
document.form1.Radio2.checked = true;
}
function onButtonClick3() {
document.form1.Radio3.checked = true;
}
</script>
</head>
<body>
<form name="form1" action="">
<input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">ラジオボタン 要素1</label><br />
<input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">ラジオボタン 要素2</label><br />
<input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">ラジオボタン 要素3</label><br />
</form>
<div id="output"></div>
<hr />
<button onclick="onButtonClick1();">設定 1</button>
<button onclick="onButtonClick2();">設定 2</button>
<button onclick="onButtonClick3();">設定 3</button>
</body>
</html>
HTMLページにボタンを3つ配置し、それぞれのボタンがクリックされた場合のイベントが以下の関数です。
クリックされたボタンにより、ラジオボタンのチェックを変更します。
function onButtonClick1() {
document.form1.Radio1.checked = true;
}
function onButtonClick2() {
document.form1.Radio2.checked = true;
}
function onButtonClick3() {
document.form1.Radio3.checked = true;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ボタンをクリックすると、ラジオボタンのチェックが設定されます。
ラジオボタンのチェックは同じグループの中で1つのみがチェックされるため、
チェックが変更されると他のラジオボタンのチェックは自動的に解除されます。
DOMを利用して、GetElementByIdでラジオボタンのチェック状態を設定することもできます。
GetElementByIdを利用した場合は、ラジオボタンがフォーム内に存在していない状態でも設定できます。
下記のHTMLファイルを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function onButtonClick1() {
var radiobtn = document.getElementById("Radio1");
radiobtn.checked = true;
}
function onButtonClick2() {
var radiobtn = document.getElementById("Radio2");
radiobtn.checked = true;
}
function onButtonClick3() {
var radiobtn = document.getElementById("Radio3");
radiobtn.checked = true;
}
</script>
</head>
<body>
<form name="form1" action="">
<input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">ラジオボタン 要素1</label><br />
<input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">ラジオボタン 要素2</label><br />
<input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">ラジオボタン 要素3</label><br />
</form>
<div id="output"></div>
<hr />
<button onclick="onButtonClick1();">設定 1</button>
<button onclick="onButtonClick2();">設定 2</button>
<button onclick="onButtonClick3();">設定 3</button>
</body>
</html>
HTMLページにボタンを3つ配置し、それぞれのボタンがクリックされた場合のイベントが以下の関数です。
クリックされたボタンにより、ラジオボタンのチェックを変更します。先のコードと同じ処理ですが、
document.getElementById() メソッドを呼び出してIDの値から要素を取得し、checkedプロパティの値を設定しています。
function onButtonClick1() {
var radiobtn = document.getElementById("Radio1");
radiobtn.checked = true;
}
function onButtonClick2() {
var radiobtn = document.getElementById("Radio2");
radiobtn.checked = true;
}
function onButtonClick3() {
var radiobtn = document.getElementById("Radio3");
radiobtn.checked = true;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ボタンをクリックすると、ラジオボタンのチェックが設定されます。
ラジオボタンのチェックは同じグループの中で1つのみがチェックされるため、
チェックが変更されると他のラジオボタンのチェックは自動的に解除されます。
JavaScriptのコードから、ラジオボタンのチェック状態を設定できました。
