このページでは、JavaScriptを使用してフォーム部品（特にチェックボックス）を操作する方法について、defaultChecked、checked、click()プロパティやメソッドに焦点を当てて解説します。

defaultCheckedプロパティについて

defaultCheckedプロパティは、チェックボックスがHTMLの初期状態でチェックされているかどうかを示します。このプロパティは読み取り専用であり、JavaScriptで変更することはできません。

たとえば、以下のHTMLコードでは、defaultCheckedはtrueになります。

<input type="checkbox" name="example" id="example" defaultChecked>

JavaScriptで確認する方法:

const checkbox = document.getElementById("example");
console.log(checkbox.defaultChecked); // true

フォームがリセットされた場合、このプロパティの値に基づいてチェック状態がリセットされます。

checkedプロパティについて

checkedプロパティは、チェックボックスが現在チェックされているかどうかを示します。このプロパティは書き込み可能であり、JavaScriptを使用して変更できます。

たとえば、以下のように使用します:

const checkbox = document.getElementById("example");
checkbox.checked = true; // チェック状態にする
console.log(checkbox.checked); // true

このプロパティはユーザー操作によっても変化します。

click()メソッドについて

click()メソッドを使用すると、プログラム的にチェックボックスをクリックすることができます。このメソッドを呼び出すと、実際にユーザーがクリックしたかのように動作し、changeイベントが発生します。

たとえば、次のコードはチェックボックスをクリックします:

const checkbox = document.getElementById("example");
checkbox.click(); // チェックボックスがクリックされる

このメソッドを使用すると、イベントリスナーをトリガーするのに便利です。

具体例

例1: defaultCheckedとcheckedの違い

<input type="checkbox" id="example2" defaultChecked>
<button onclick="checkStatus()">状態を確認する</button>

<script>
function checkStatus() {
    const checkbox = document.getElementById("example2");
    console.log("defaultChecked:", checkbox.defaultChecked);
    console.log("checked:", checkbox.checked);
}
</script>

この例では、defaultCheckedとcheckedの値を比較することができます。

例2: click()メソッドの利用

<input type="checkbox" id="example3">
<button onclick="triggerClick()">クリックをトリガー</button>

<script>
function triggerClick() {
    const checkbox = document.getElementById("example3");
    checkbox.click();
    console.log("現在の状態:", checkbox.checked);
}
</script>

この例では、ボタンをクリックするとチェックボックスがクリックされます。

例3: 状態をリセット

<form id="form">
    <input type="checkbox" id="example4" defaultChecked>
    <button type="button" onclick="resetForm()">フォームをリセット</button>
</form>

<script>
function resetForm() {
    const form = document.getElementById("form");
    form.reset(); // フォーム全体をリセット
    const checkbox = document.getElementById("example4");
    console.log("リセット後:", checkbox.checked);
}
</script>

この例では、フォームをリセットするとdefaultCheckedの状態に戻ります。

以上で、defaultChecked、checked、click()に関する詳細な解説と例を紹介しました。これらを活用してフォーム操作を効率化してください。