HTML DOM input オブジェクト - checkbox

 

HTML DOM Input Checkbox オブジェクト詳解: ウェブページのチェックボックスをマスターする

説明: 本文はHTML DOMにおける input checkbox オブジェクトについて掘り下げ、属性、メソッド、イベントを詳細に解説し、ウェブページのチェックボックスの作成、操作、インタラクションを容易に習得できるようにします。

 

一、Input Checkbox オブジェクトとは？

  • <input type="checkbox"> 要素は、ウェブページ上にチェックボックスを作成するために使用され、ユーザーは複数の選択肢から選択することができます。
  • 各チェックボックスは独立したコントロールであり、選択または選択解除が可能で、それに関連付けられた値もそれに応じて変化します。
  • JavaScript の HTML DOM を使用すると、これらのチェックボックスオブジェクトにアクセスして操作し、動的なインタラクション効果を実現できます。

二、Input Checkbox オブジェクトの属性

1. コア属性:

属性名 説明
checked ブール値、チェックボックスが選択されているかどうかを示します。
defaultChecked ブール値、チェックボックスがページの読み込み時にデフォルトで選択されているかどうかを示します。
value 文字列、チェックボックスの値を定義し、フォームの送信時にこの値が送信されます。
name 文字列、チェックボックスの名前を定義し、サーバー側でデータの識別と処理に使用されます。
disabled ブール値、チェックボックスが無効化されているかどうかを示します。
required ブール値、チェックボックスが入力必須項目かどうかを示します。

2. その他の常用属性:

属性名 説明
indeterminate ブール値、チェックボックスが不確定状態（例：部分的に選択）かどうかを示します。
form このチェックボックスを含むフォーム要素を返します。
labels このチェックボックスに関連付けられているすべての <label> 要素を返します。

三、Input Checkbox オブジェクトのメソッド

1. フォーカス制御:

  • focus(): チェックボックスにフォーカスを当てます。
  • blur(): チェックボックスのフォーカスを外します。

2. 状態制御:

  • click(): ユーザーがチェックボックスをクリックした動作をシミュレートします。

四、Input Checkbox オブジェクトのイベント

1. 状態変更イベント:

  • change: チェックボックスの選択状態が変化したときに発生します。

2. マウスイベント:

  • click: ユーザーがチェックボックスをクリックしたときに発生します。

3. キーボードイベント:

  • keydown: ユーザーがキーボードの任意のキーを押したときに発生します。押されたキーがスペースキーの場合、チェックボックスの選択状態が切り替わります。
  • keyup: ユーザーがキーボードの任意のキーを離したときに発生します。

五、サンプルと応用

サンプルコード:


<input type="checkbox" id="myCheckbox" value="yes">
<label for="myCheckbox">同意しますか？</label>

<script>
const checkbox = document.getElementById('myCheckbox');

// チェックボックスの値を取得する
console.log(checkbox.checked); // false

// チェックボックスの値を設定する
checkbox.checked = true;

// チェックボックスの状態変化イベントをリッスンする
checkbox.addEventListener('change', (event) => {
  console.log('チェックボックスの状態が変更されました:', event.target.checked);
});
</script>

実際の応用シーン:

  • ユーザーアンケートフォームの作成
  • ショッピングカートの商品選択
  • 権限管理

六、まとめ

本文はHTML DOMにおける input checkbox オブジェクトの属性、メソッド、イベントについて詳しく解説しました。これらの知識を習得することで、ウェブページのチェックボックスを簡単に操作し、豊かなユーザーインタラクション機能を実現することができます。

Q&A

1. チェックボックスの選択状態をJavaScriptで取得するにはどうすればよいですか？

チェックボックスの checked プロパティにアクセスすることで、選択状態を取得できます。例：


const checkbox = document.getElementById('myCheckbox');
const isChecked = checkbox.checked; // trueまたはfalse

2. チェックボックスの選択状態をJavaScriptで変更するにはどうすればよいですか？

チェックボックスの checked プロパティに true または false を設定することで、選択状態を変更できます。例：


const checkbox = document.getElementById('myCheckbox');
checkbox.checked = true; // チェックボックスを選択状態にする

3. チェックボックスの選択状態が変化したときにイベントを発生させるにはどうすればよいですか？

チェックボックスの change イベントをリッスンすることで、選択状態が変化したときにイベントを発生させることができます。例：


const checkbox = document.getElementById('myCheckbox');
checkbox.addEventListener('change', (event) => {
  // 選択状態が変化したときの処理
});