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

HTML DOMのInput Checkboxオブジェクトとは？基本構文と主要属性を徹底解説

HTML DOMのInput Checkboxオブジェクトは、type属性が「checkbox」に設定されたinput要素を表すオブジェクトです。JavaScriptを利用することで、チェックボックスの状態や値を動的に取得・変更できるようになります。

構文

Input Checkboxオブジェクトを作成するための基本的な構文は以下のとおりです。

チェックボックス型のinput要素を作成する

var checkboxObject = document.createElement("input");
checkboxObject.type = "checkbox";

まずcreateElement()でinput要素を生成し、その後typeプロパティに「checkbox」を指定することで、チェックボックスとして機能する要素が完成します。

主な属性（プロパティ）

checkboxObjectには、以下のような属性が用意されています。

属性説明
autofocusページの初期読み込み時に、チェックボックスへ自動的にフォーカスを当てるかどうかを定義します。
checkedチェックボックスの現在の状態（チェック済み／未チェック）を定義します。
defaultCheckedchecked属性のデフォルト値（true／false）を返します。
defaultValueチェックボックスのデフォルト値を設定または取得します。
disabledチェックボックスが無効化されているかどうかを定義します。
formチェックボックスを含むフォームへの参照を返します。
indeterminateチェックボックスの不確定状態（中途半端な選択状態）を設定または取得します。
nameチェックボックスのname属性の値を定義します。
requiredフォーム送信時に、このチェックボックスへのチェックが必須かどうかを定義します。
typeチェックボックスのフォーム要素の種類を返します。
valueチェックボックスのvalue属性の値を定義します。

使用例

ここでは、Input Checkboxのvalueプロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Value Attribute of Checkbox</title>
</head>
<body>
<form id="Form">
<div>
Color-Red: <input value="Green" id="formCheckbox" type="checkbox" name="formCheckbox">
</div>
</form>
<button onclick="changeType()">Change value of input checkbox</button>
<div id="displayDiv"></div>
<script>
    var valueOfInput = document.getElementById("formCheckbox");
    var displayDiv = document.getElementById("displayDiv");
    displayDiv.textContent = 'Value: ' + valueOfInput.value;
    function changeType(){
       if(valueOfInput.value == 'Green' && valueOfInput.checked == true){
          valueOfInput.value = 'Red' displayDiv.textContent = 'value: ' + valueOfInput.value;
       } else {
          displayDiv.textContent = 'Check the checkbox to change value to red';
       }
    }
</script>
</body>
</html>

このコードでは、初期値が「Green」に設定されたチェックボックスを配置し、ボタンをクリックするとvalueプロパティの値を表示します。チェックボックスにチェックが入っている場合は値が「Red」に書き換えられ、チェックされていない場合はチェックを促すメッセージが表示される仕組みです。

出力結果

上記のコードを実行すると、次のような結果が得られます。

「Change value of input checkbox」ボタンをクリックする前：

HTML DOMのInput Checkboxオブジェクトとは？基本構文と主要属性を徹底解説

「Change value of input checkbox」ボタンをクリックした後：

HTML DOMのInput Checkboxオブジェクトとは？基本構文と主要属性を徹底解説

「Color-Red」チェックボックスにチェックを入れて、「Change value of input checkbox」ボタンをクリックした場合：

HTML DOMのInput Checkboxオブジェクトとは？基本構文と主要属性を徹底解説


  1. HTML DOM Input Reset（リセットボタン）オブジェクトの使い方とプロパティ一覧

    HTML DOM の Input Reset オブジェクトは、type 属性に reset が指定された <input> 要素に関連付けられています。リセットボタンとなる入力要素は、新規に作成する場合は createElement() メソッドを、既存の要素にアクセスする場合は getElementById() メソッドを使用することで操作できます。 Input Reset オブジェクトの主なプロパティ Input Reset オブジェクトには、以下のプロパティが用意されています。 プロパティ説明 autofocusページ読み込み時に、リセットボタンへ自動的にフォーカスを当

  2. HTML DOM Meterオブジェクトとは？使い方と主要プロパティを徹底解説

    HTML DOM Meterオブジェクトとは HTML DOMにおけるMeterオブジェクトは、HTMLの<meter>要素をJavaScriptから操作・制御するためのインターフェースです。<meter>要素は、ディスク使用量やアンケート結果など、既知の範囲内における値をゲージ（計器）として視覚的に表示する際に使用されます。 注意：<meter>要素はプログレスバー（進捗状況の表示）として使用しないでください。あくまでゲージとしてのみ使用するのがルールです。進捗表示には<progress>要素を使うのが適切です。 構文 <meter>