We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

checkbox 型の <input> 要素は、既定で四角い箱として描画され、政府の書類で見られるように、有効な時にはチェックが入ります。これによって、フォームで単一の値を選択して(または選択せずに)送信することができます。

<input id="checkBox" type="checkbox">

メモ: ラジオボタンはチェックボックスと似ていますが、重要な違いがあります。ラジオボタンはグループ化されており、同時に1つしか選択できないのに対し、チェックボックスは単一の値をオンにしたりオフにしたり切り替えることができます。複数のコントロールがある場所では、ラジオボタンはその中で一つしか選択できませんが、チェックボックスは複数の値が選択できます。

チェックボックスの値を表す DOMString
イベント change および input
対応する共通の属性 checked
IDL 属性 checked および value
メソッド select()

チェックボックスの値を表す DOMString です。これはクライアント側には表示されませんが、サーバー上ではチェックボックスの name と共に送信されるデータに与えられる value になります。次の例を見てください。

<form>
  <div>
    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

この例では、 name を subscribe に、 value を newsletter にしました。フォームが送信されると、データの名前と値の組み合わせは subscribe=newsletter となります。

value 属性が省略された場合は、チェックボックスの既定値は on ですので、その場合の送信されるデータは subscribe=on となります。

メモ: フォームが送信されたときにチェックボックスがチェックされていなかった場合、チェックされていない状態を表す値(value=unchecked など)が送信されることはなく、値はサーバーに全く送信されません。

チェックボックスの使用

上記で最も基本的なチェックボックスの使用を見てきました。他に必要になりそうなチェックボックスに関するよく使われる機能や技術を見てみましょう。

複数チェックボックスの扱い

上記の例では、チェックボックスが1つしか含まれていませんでした。 実際の状況では、複数のチェックボックスが発生する可能性があります。 それらが互いに完全に無関係であれば、上記のようにすべて別々に処理できます。 しかし、もしそれらがすべて関連していれば、事はそう単純ではありません。

例えば、次のデモにはユーザーが関心のあることを選択できるように、複数のチェックボックスが含まれています(完全な版は Examples の章で確認してください)。

<fieldset>
  <legend>関心があるものを選んでください</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">コーディング</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音楽</label>
  </div>
</fieldset>

この例では、両方のチェックボックスに同じ name を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は interest=coding&interest=music のように送信されます。データがサーバー側に届いたときには、これを関連する値の配列として取り込み、適切に扱ってください。例えば、単一のサーバー側の変数で複数のチェックボックスを扱うを参照してください。

既定のチェックボックス

チェックボックスを既定でチェック状態にするには、 checked 属性を設定するだけです。次の例を見てください。

<fieldset>
  <legend>関心があるものを選んでください</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked>
    <label for="coding">コーディング</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">音楽</label>
  </div>
</fieldset>

チェックボックスの当たり判定領域を広げる

上記の例では、チェックボックス自身と同様に、関連する <label> 要素をクリックするとチェックボックスを切り替えられることに気づいたかもしれません。これは HTML フォームのラベルの本当に便利な機能で、特にスマートフォンのような画面の小さい機器でオプションをクリックしやすくなります。

これがフォームに <label> 要素を適切に設定するアクセシビリティ以外のもう一つの理由です。

未決定状態のチェックボックス

チェックボックスにはチェックと未チェックの状態に加え、第三の状態である未決定 (indeterminate) を持つことができます。この状態は項目がオンともオフとも言えない状態です。これは JavaScript から HTMLInputElement オブジェクトの indeterminate プロパティを使用して設定されます(HTML の属性を使用して設定することはできません)。

inputInstance.indeterminate = true;

多くのブラウザーでは、未決定の状態のチェックボックスにはボックス内にチェックの代わりに水平線(ハイフンやマイナス記号のように見えるもの)が引かれます。

このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション(チェックボックス)を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。

これは以下の例に見られます(この発想は CSS Tricks のおかげです)。この例では、製作手順のために収集する材料を追跡しています。 材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。

  • チェックがない場合、製作手順名のチェックボックスは未チェックになります。
  • 1つまたは2つがチェックされた場合、製作手順名のチェックボックスは indeterminate に設定されます。
  • 3つともチェックされた場合は、製作手順名のチェックボックスが checked に設定されます。

ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に indeterminate が使われます。

  var overall = document.querySelector('input[id="EnchTbl"]');
  var ingredients = document.querySelectorAll('ul input');

  overall.addEventListener('click', function(e) {
    e.preventDefault();
  });

  for(var i = 0; i < ingredients.length; i++) {
    ingredients[i].addEventListener('click', updateDisplay);
  }

  function updateDisplay() {
    var checkedCount = 1;
    for(var i = 0; i < ingredients.length; i++) {
      if(ingredients[i].checked) {
        checkedCount++;
      }
    }

    if(checkedCount === ingredients.length + 1) {
      overall.checked = true;
      overall.indeterminate = false;
    } else if(checkedCount <= ingredients.length + 1 && checkedCount > 1) {
      overall.checked = false;
      overall.indeterminate = true;
    } else {
      overall.checked = false;
      overall.indeterminate = false;
    }
  }

メモ: 未決定状態のチェックボックスををフォームで送信すると、チェックされていない場合と同じ結果になります。チェックボックスを表現するためのデータは送られません。

検証

チェックボックスは検証(すべての <input> に対して行われる)に対応しています。しかし、多くの場合 ValidityState は常に false になります。チェックボックスに required 属性がある場合で、チェックされていない場合、 ValidityState.valueMissingtrue になります。

次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。 これは JavaScript の単純なブロックで実現します。 この例には、整形方法を改善するための CSS も含まれています。

HTML

<form>
  <fieldset>
  <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding">
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music">
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art">
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports">
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking">
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other">
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other">
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

 

var otherCheckbox = document.querySelector('input[value="other"]');
var otherText = document.querySelector('input[id="otherValue"]');
otherText.style.visibility = 'hidden';

otherCheckbox.onchange = function() {
  if(otherCheckbox.checked) {
    otherText.style.visibility = 'visible';
    otherText.value = '';
  } else {
    otherText.style.visibility = 'hidden';
  }
};

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
<input type="checkbox"> の定義
現行の標準  
HTML5
<input type="checkbox"> の定義
勧告  

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本対応 (有) (有) (有) (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 (有) 4.0 (2.0) (有) (有) (有)

関連情報

  • <input> 及びそれに実装されている HTMLInputElement インターフェイス。
  • CSS の :checked 及び :indeterminate セレクターで、現在の状態に基づいてチェックボックスを整形できます

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, dskmori
最終更新者: mfuji09,