チェックボックスを最初からONにするには、input要素にchecked属性を付けます。<input type="checkbox" checked>と書くだけです。
初期チェックとは - checked属性
checked属性は、チェックボックスをページ表示時からチェック済みの状態にするための属性です。<input type="checkbox">に付けるだけで機能します。
checkedは論理属性と呼ばれる種類の属性で、値を書かなくても存在するだけで有効です。checked="checked"と書いても意味は変わりません。
checkedの書き方 - 初期状態でON
初期チェックの有無で、2つのチェックボックスを比較する例です。
<label><input type="checkbox" name="notify" value="mail" checked> メールで受け取る</label><br>
<label><input type="checkbox" name="notify" value="sms"> SMSで受け取る</label>checkedを付けた1つ目だけが、チェック済みの状態で表示されます。フォームをリセットした時も、この初期状態に戻ります。
チェック状態を確認・変更する
表示後の現在の状態は、HTMLの属性ではなくJavaScriptのcheckedプロパティで扱います。trueならON、falseならOFFです。
<label><input type="checkbox" id="agree" checked> 利用規約に同意する</label>
<button onclick="alert(document.getElementById('agree').checked)">状態を確認</button>
<button onclick="document.getElementById('agree').checked = false">OFFにする</button>checked属性が決めるのはあくまで初期値です。ユーザーの操作後の状態はcheckedプロパティにだけ反映されるため、取得や変更はプロパティ側で行います。
