<input type="checkbox">

<input> 要素の checkbox 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して (または選択せずに) 送信することができます。

値

チェックボックスの値を表す 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 となります。

追加の属性

すべての <input> 型で共通する属性に加え、 "checkbox" 型の入力欄は次の属性にも対応しています。

checked

論理属性で、チェックボックスが既定で (ページが読み込まれたときに) チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものではありません。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。 (HTMLInputElement の checked IDL 属性のみが更新されます。)

他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <input> のチェック状態を維持します。この機能を制御するには autocomplete 属性を使用してください。

value

value 属性はすべての <input> 要素で共通のものです。しかし、 checkbox 型の入力欄では特殊な用途を提供します。フォームが送信されると、現在チェックされているチェックボックスのみがサーバーに送信され、報告される値が value 属性の値になります。 value が指定されていない場合は、既定で on の文字列になります。これは前述の値の節で紹介されています。

チェックボックスの使用

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

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

上記の例では、チェックボックスが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 のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 interest の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 PHP を使用したやり方としては、例えば、単一のサーバー側の変数で複数のチェックボックスを扱うを参照してください。

既定のチェックボックス

チェックボックスを既定でチェック状態にするには、 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 = 0;
    for(var i = 0; i < ingredients.length; i++) {
      if(ingredients[i].checked) {
        checkedCount++;
      }
    }

    if(checkedCount === 0) {
      overall.checked = false;
      overall.indeterminate = false;
    } else if(checkedCount === ingredients.length) {
      overall.checked = true;
      overall.indeterminate = false;
    } else {
      overall.checked = false;
      overall.indeterminate = true;
    }
  }

検証

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

例

次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。これは 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.addEventListener('change', () => {
  if(otherCheckbox.checked) {
    otherText.style.visibility = 'visible';
    otherText.value = '';
  } else {
    otherText.style.visibility = 'hidden';
  }
});

仕様書

ブラウザーの互換性

関連情報

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