<input type="checkbox">
<input type="checkbox"> は複数の選択肢からいくつかの選択ができる HTML タグエレメントで <input> のタイプのひとつです。
<input type="checkbox"> エレメントは複数の選択を可能にする入力部品です。
<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"> です。
入力不可能にするには
入力不可能にするにはスタイルシートで pointer-events:none; を指定します。
<label> にそのスタイルを指定すると上手くいくようです。
例えば以下のようにします。
<label style="pointer-events:none;"><input name="val_radio" type="checkbox" value="" />いぬ</label> <label style="pointer-events:none;"><input name="val_radio" type="checkbox" value="" />ねこ</label> <label style="pointer-events:none;"><input name="val_radio" type="checkbox" value="" />さる</label>
属性
グローバル属性も持ちます。以下に主な属性のみを示します。
JavaScript
複数の <input type="checkbox"> から JavaScript で選択された値を取得するには、以下のように checked 属性が true である項目の value 値を取り出します。
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
を参照してください。
関連typeについて
- button... 汎用ボタン。scriptに利用する
- checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
- color... カラーピッカー。色選択に使用します。
- date... 日付け
- datetime-local... 日付けと時刻(ローカルタイムゾーン)
- email... emailアドレス
- file... ファイルのアップロード
- hidden... 画面に表示しないがサーバーに送信するデータ
- image... 任意の画像を利用したカスタム用ボタン
- month... 年度と月度
- number... 数値
- password... パスワード入力
- radio... 選択肢が必要な場合
- range... 調整バーによる数値入力
- reset... リセットボタン。入力データをクリア
- search... 検索用
- submit... 送信ボタン
- tel... 電話番号
- text... テキスト入力。改行を含む場合は<textarea>を
- time... 時刻
- url... URL
- week... 年度の第何週目か