備忘録的プログラミングリファレンス

<input type="checkbox">

 <input type="checkbox"> は複数の選択肢からいくつかの選択ができる HTML タグエレメントで <input> のタイプのひとつです。
 <input type="checkbox"> エレメントは複数の選択を可能にする入力部品です。

<input type="buttom">
<label><input name="example_check" type="checkbox" value="dog" />いぬ</label>
<label><input name="example_check" type="checkbox" value="cat" />ねこ</label>
<label><input name="example_check" type="checkbox" value="monkey" />さる</label>
上記を実行

 <label> エレメントは項目名や説明のために付けることができます。

 複数の選択肢から1つだけを選択できる入力部品は <input type="radio"> です。

- ad -

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
name*必須。タグエレメントを特定するための属性です。
classcssに使います。同名のclassは同じスタイルが適応されます。
type 扱うデータタイプまたはinputタグの形状
maxlength 最大入力数
size 入力ボックスの幅

 以下の編集方法は、項目ごとに「value値=項目名」と編集します。最初の値はvalue値で、次の値が項目名です。
 checkedを付けることでデフォルトの値として指定できます。


ブラウザでの見え方(このページのスタイルが反映されています)

JavaScript

 複数の <input type="checkbox"> から JavaScript で選択された値を取得するには、以下のように checked 属性が true である項目の value 値を取り出します。

<input type="checkbox"> からの値の取得
value_checked = '';
for( i=0; i < form_name.input_name.length; ++i ){
	if( form_name.input_name.checked == true )
		value_checked = form_name.input_name[i].value;
}

 複数ある選択肢から繰り返し評価を行い checked==true である value 値を取得します。上記の例では、value_checked に値を取得しています。

 サーバー送信の場合は、取り出し処理を行わなくても checked された値が送信されます。

 詳しくは、NodeList インターフェイス Exampleを参照してください。

- ad -