チェックボックスを使用することは、訪問者に選択肢のグループからいくつかのアイテムを選択するオプションを与えたい場合に適したオプションです。 その点で、チェックボックスは、選択肢のグループから一つの項目を選択することができますラジオボタンの反対に動作します。,
<input type="checkbox">ただし、すべての入力要素と同様に、使用できるように名前を定義する必要があります。 これは、チェックボックスがチェックされている場合にサーバーに送信される値になります。,
<input type="checkbox" name="nameOfChoice" value="1">この例では、チェックボックスがチェックされていて、フォームがサーバーに送信されると、サーバーはフォーム要素”nameOfChoice”を読み取ることができ、その値は1になります。
チェックまたはチェックされていませんか？
これまでのすべてのチェックボックスが最初からチェックされていないことに注意してください-ユーザーはcheckboxを操作して状態をuncheckedからcheckedに変, これはあなたが望むものかもしれませんが、ユーザーに選択肢を提案するか、データベースなどの既存の設定に対応する値を持つcheckboxを表示しているために、checkboxをデフォルトでチェックしたい場合があります。, 幸いなことに、これは非常に簡単です-チェックボックスにchecked属性を追加するだけです：
<input type="checkbox" name="nameOfChoice" value="1" checked>XHTMLの昔では、各属性は常に値を持つ必要があります。
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />どちらの方法でも、最新のすべてのブラウザで動作するはずですが、最初の方法は短く、より”HTML5のような”ものです。
複数の選択肢
これまでのところ、すべてのチェックボックスは、オプションがオンかオフかを定義するための単純なスイッチでした。, チェックボックスはそれに最適ですが、前述のように、ユーザーに可能なオプションを選択できるようにするためにも使用できます。 これが理にかなっているきれいな例をお見せしましょう：
複数のチェックボックスがありますが、それらはすべて同じ名前（”favorite_pet”）ですが、異なる値（”Dogs”など） このフォームがサーバーに送信されると、これらのチェックボックスはすべて単一の名前で表されますが、値は0-3個のアイテムの配列になります。, チェックボックスの代わりにラジオボタンを使用していた場合、ユーザーは単一のお気に入りの動物のみを選択できますが、チェックボックスを使用する
チェックボックスのラベル
前の例をテストした場合、checkboxの横にテキストを置くことができますが、それらはまだ二つの別々のものです。 これはユーザーにとって本当に迷惑なことがありますが、幸いなことに、解決するのは簡単です：label要素を使用するだけです！, 違いを示すための基本的な例は次のとおりです。
二つのチェックボックス-一つはラベルのないものと一つは付いています。 それとほぼ同じですが、一つのラベルによっても実行させることができクリックの両方の実際のチェックボックスを付けるラベル。 あなたはマウスでデスクトップPCの上に座っている場合、これはいいですが、あなたは小さなチェックボックスがあなたの指でヒットするのは難し,ラベルは非常に簡単です-for属性を使用して、一致するid属性を持つフォーム要素に自分自身をアタッチします（両方の場所に”犬”があることに注意して
checkboxで動的に動作する
他のDOM要素と同様に、javascriptを使用してcheckboxを操作することができます。 その点で、チェックボックスがチェックされているかどうかをチェックし、ユーザーが選択できるオプションの数を制御するためのロジックを追加する, これをどのように行うことができるかを示すために、前の例（”Favorite Pet”セレクター）を拡張して、JavaScriptの魔法を含めました。
このコードが何をするかをすばやく実行できるようにしました。 以前と同じ形式ですが、各チェックボックスにイベントハンドラーを追加し、ユーザーがクリックしたときにJavaScript関数（ValidatePetSelection）を呼び出します。 この関数では、getElementsByName関数を使用して関連するすべてのチェックボックスを取得し、それらをループしてチェックされているかどうかを確認します。, この番号がチェックされ、二つを超えた場合、問題についてユーザーに警告し（二つのペットのみを選択できます）、falseを返します。 Falseを返すと、checkboxがチェックされなくなります。
これは、JavaScriptを使用してチェックボックスを操作する方法の単純な例でした。 特にjQueryのようなJavaScriptフレームワークを使用すると、DOM要素の選択と操作がはるかに簡単になります。,
概要
チェックボックスを使用すると、ユーザーに選択可能なオプションを設定できます-単一の設定をオンまたはオフに切り替えるか、お気に入りのペットの例のように複数の選択肢を許可するかのいずれかです。 チェックボックスを操作するときに、ユーザーがより大きな領域をクリックできるように、チェックボックスと説明テキストを一緒に結ぶためにラベルを使用する必要があります。
