HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM チェックボックスのdefaultCheckedプロパティとは？使い方をサンプルコード付きで解説

HTML DOM の input checkbox の defaultChecked プロパティは、HTML 内でチェックボックスに設定された checked 属性の初期値（デフォルト値）を取得するためのプロパティです。

このプロパティは、ページ読み込み時にチェックボックスがあらかじめチェック状態になっていたかどうかを判定したい場合に便利です。なお、現在のチェック状態を取得する checked プロパティとは異なり、defaultChecked はユーザーがその後チェックを変更しても、HTML 上で指定された初期状態を常に返すという点に注意してください。

構文

defaultChecked プロパティの基本的な構文は以下のとおりです。

object.defaultChecked

戻り値はブール値（true / false）で、チェックボックスの checked 属性が HTML 内で指定されていれば true、指定されていなければ false を返します。

サンプルコード

それでは、defaultChecked プロパティの具体的な使用例を見てみましょう。以下の例では、あらかじめ checked 属性が付与されたチェックボックスに対して、ボタンをクリックすることで初期状態を判定しています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM defaultChecked プロパティ</title>
<style>
    body{
        text-align:center;
    }
    p{
        font-size:1.5rem;
        color:#ff8741;
    }
    input{
        width:30px;
        height:30px;
    }
    button{
        background-color:#db133a;
        color:#fff;
        padding:8px;
        border:none;
        width:180px;
        margin:0.5rem;
        border-radius:50px;
        outline:none;
        font-weight:bold;
    }
    .show-msg{
        color:#db133a;
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>defaultChecked プロパティの例</h1>
<p>あなたは賢いですか？</p>
<input type="checkbox" checked>
<br>
<button onclick="check()">確認する？クリックしてください</button>
<div class="show-msg"></div>
<script>
    function check() {
        var input = document.querySelector("input");
        var showMsg = document.querySelector(".show-msg");
        if(input.defaultChecked === true){
            showMsg.innerHTML="正解です！あなたはデフォルトで賢いです";
        } else {
            showMsg.innerHTML="うーん…デフォルトでは賢くないようです";
        }
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のような画面が表示されます。

HTML DOM チェックボックスのdefaultCheckedプロパティとは？使い方をサンプルコード付きで解説

ここで「確認する？クリックしてください」ボタンをクリックすると、JavaScript によってチェックボックスの初期状態が判定され、結果が画面に表示されます。

HTML DOM チェックボックスのdefaultCheckedプロパティとは？使い方をサンプルコード付きで解説

この例では、チェックボックスに checked 属性が設定されているため、input.defaultChecked === true の条件が成立し、「正解です！あなたはデフォルトで賢いです」というメッセージが表示されます。もし checked 属性を削除すれば、条件式は false となり、別のメッセージが表示されることを確認できます。

まとめ

defaultChecked プロパティを使えば、JavaScript からチェックボックスの初期状態（HTML 上の checked 属性）を簡単に参照できます。フォームのリセット処理や、ユーザー操作前の状態との比較などに活用できるので、ぜひ覚えておきましょう。

  1. HTML DOM 入力チェックボックスの disabled プロパティとは？使い方を徹底解説

    HTML DOM の Input Checkbox（チェックボックス）の disabled プロパティは、チェックボックスを有効にするか無効にするかを設定・取得するためのプロパティです。この記事では、基本的な構文から実際のコード例まで、初心者にもわかりやすく解説します。基本情報disabled プロパティを使うことで、JavaScript から動的にチェックボックスの操作可否を切り替えることができます。たとえば、特定の条件が満たされるまでフォームの入力を禁止したい場合などに活用できます。構文disabled プロパティの構文は以下の通りです。値の取得（ブール値を返す）inputCheckbox

  2. HTML DOM Input RadioのdefaultCheckedプロパティとは？使い方をわかりやすく解説

    HTML DOMのInput Radio defaultCheckedプロパティは、ラジオボタンがデフォルト状態でチェックされているかどうかを確認するために使用されます。ラジオボタンのchecked属性がHTML内で設定されていればtrueを、設定されていなければfalseを返します。なお、defaultCheckedプロパティはHTMLソース上の初期状態（checked属性の有無）を判定する点に注意してください。ユーザーの操作による現在のチェック状態を取得したい場合は、checkedプロパティを使用します。構文Radio defaultCheckedプロパティの構文は以下のとおりです。rad