JavaScriptのdefaultChecked・defaultSelectedとは？初期状態を取得する方法を解説
defaultChecked と defaultSelected は、フォーム要素が「ページ読み込み時にどういう状態だったか」を参照するためのプロパティです。
ユーザーが操作した後でも、初期状態を確認したいときに役立ちます。
defaultCheckedプロパティとは？
defaultChecked は、チェックボックスやラジオボタンが
ページ読み込み時にチェックされていたかどうか を返します。
- true → 初期状態でチェックされていた
- false → 初期状態ではチェックされていなかった
ユーザーがチェックを変更しても、defaultChecked の値は変わりません。
使用例
// 初期チェック状態を確認
let initCheck = document.form1.agree.defaultChecked;
let initCheck = document.form1.agree.defaultChecked;
defaultSelectedプロパティとは？
defaultSelected は、セレクトメニュー（<select>）内の各項目が
ページ読み込み時に選択されていたかどうか を返します。
- true → 初期状態で選択されていた
- false → 初期状態では選択されていなかった
項目は options[番号] で参照します。番号は 0 から始まります。
使用例
// セレクトメニューの初期選択状態を確認
let initSelect = document.form1.menu.options[0].defaultSelected;
let initSelect = document.form1.menu.options[0].defaultSelected;
実際のフォーム例
<form name=”form1″>
<p>
<input type=”checkbox” name=”agree” checked> 同意する（初期チェック）
</p>
<p>
<input type=”checkbox” name=”agree” checked> 同意する（初期チェック）
</p>
<p>
<select name=”menu”>
<option selected>選択肢1（初期選択）</option>
<option>選択肢2</option>
</select>
</p>
<input type=”button” value=”初期チェック確認” onclick=”alert(document.form1.agree.defaultChecked)”>
<input type=”button” value=”初期選択確認” onclick=”alert(document.form1.menu.options[0].defaultSelected)”>
</form>
→ ユーザーが操作しても、初期状態を確認できるのがポイント。
まとめ
defaultCheckedはチェックボックス・ラジオボタンの初期チェック状態を返すdefaultSelectedはセレクトメニューの初期選択状態を返す- ユーザー操作後でも初期状態を確認できる
- フォームのリセット処理や入力チェックに役立つ
