JavaScriptのchecked・selectedとは？チェック状態と選択状態を取得・設定する方法
checked と selected は、フォーム内のチェックボックス・ラジオボタン・セレクトメニューの状態を参照／設定するためのプロパティです。
ユーザーの入力状態を確認したり、JavaScript で選択状態を変更したりする際に必須の知識です。
checkedプロパティとは？
checked は、チェックボックスやラジオボタンが選択されているかどうかを判定するプロパティです。
- true → 選択されている（オン）
- false → 選択されていない（オフ）
選択状態を変更することもできます。
// フォーム dataForm の1番目のエレメントをオンにする
document.dataForm.elements[0].checked = true;
document.dataForm.elements[0].checked = true;
selectedプロパティとは？
selected は、セレクトメニュー（<select>）内の各項目（<option>）が選択されているかどうかを判定するプロパティです。
- true → 選択されている
- false → 選択されていない
項目は options[番号] で参照します。番号は 0 から始まります。
// セレクトメニュー dataMenu の1番目の項目が選択されている場合
if (document.dataForm.dataMenu.options[0].selected) {
alert(“確認してください”);
}
if (document.dataForm.dataMenu.options[0].selected) {
alert(“確認してください”);
}
実際のフォーム例
<form name=”dataForm”>
<p>
<input type=”checkbox” name=”agree”> 同意する
</p>
<p>
<input type=”checkbox” name=”agree”> 同意する
</p>
<p>
<select name=”dataMenu”>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
</p>
<input type=”button” value=”チェック状態確認” onclick=”alert(document.dataForm.agree.checked)”>
<input type=”button” value=”選択状態確認” onclick=”alert(document.dataForm.dataMenu.options[0].selected)”>
</form>
→ チェック状態や選択状態を簡単に取得できます。
まとめ
checkedはチェックボックス・ラジオボタンの選択状態を参照／設定するプロパティselectedはセレクトメニューの項目の選択状態を参照／設定するプロパティ- どちらも true / false で状態を判定できる
- フォーム入力チェックや動的UI制御に必須のプロパティ
