path: root/files/ja/web/html/element/input/checkbox/index.html

---
title: <input type="checkbox">
slug: Web/HTML/Element/input/checkbox
tags:
  - HTML
  - HTML フォーム
  - Reference
  - checkbox
  - チェックボックス
  - フォーム
  - 入力型
  - 要素
translation_of: Web/HTML/Element/input/checkbox
---
<div>{{HTMLRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<div class="note">
<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Element/input/radio">ラジオボタン</a>はチェックボックスと似ていますが、重要な違いがあります。ラジオボタンはグループ化されており、同時に1つしか選択できないのに対し、チェックボックスは単一の値をオンにしたりオフにしたり切り替えることができます。複数のコントロールがある場所では、ラジオボタンはその中で一つしか選択できませんが、チェックボックスは複数の値が選択できます。</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value", "値")}}</strong></td>
   <td>チェックボックスの値を表す {{domxref("DOMString")}}</td>
  </tr>
  <tr>
   <td><strong>イベント</strong></td>
   <td>{{event("change")}} および {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>対応している共通属性</strong></td>
   <td><code>checked</code></td>
  </tr>
  <tr>
   <td><strong>IDL 属性</strong></td>
   <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td>
  </tr>
  <tr>
   <td><strong>メソッド</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Value" name="Value">値</h2>

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

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;div&gt;
    &lt;input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"&gt;
    &lt;label for="subscribeNews"&gt;Subscribe to newsletter?&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button type="submit"&gt;Subscribe&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{EmbedLiveSample('Value', 600, 60)}}</p>

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

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

<div class="note">
<p><strong>メモ</strong>: フォームが送信されたときにチェックボックスがチェックされていなかった場合、チェックされていない状態を表す値 (<code>value=unchecked</code> など) が送信されることはなく、値はサーバーに全く送信されません。チェックボックスがチェックされていないときに既定値を送信したい場合は、フォーム内に {{HTMLElement("input/hidden", '&lt;input type="hidden"&gt;')}} を、同じ <code>name</code> と <code>value</code> で、おそらく JavaScript で含めることで実現できます。</p>
</div>

<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">属性</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("checked")}}</code></td>
   <td>論理属性。存在する場合、チェックボックスは既定でオンの状態</td>
  </tr>
  <tr>
   <td><code>{{anch("value")}}</code></td>
   <td>文字列で、チェックボックスがオンの状態の場合、フォームを送信するときのチェックボックスの値として使われる</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>

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

<div class="note">
<p><strong>メモ:</strong> 他の入力コントロールとは異なり、チェックボックスの値は現在 <code>checked</code> の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの <code>value</code> 属性の値が入力欄の値として報告されます。</p>
</div>

<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code>&lt;input&gt;</code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p>

<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>

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

<h2 id="Using_checkbox_inputs" name="Using_checkbox_inputs">チェックボックスの使用</h2>

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

<h3 id="Handling_multiple_checkboxes" name="Handling_multiple_checkboxes">複数チェックボックスの扱い</h3>

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

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

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

<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p>

<p>この例では、両方のチェックボックスに同じ <code>name</code> を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は <code>interest=coding&amp;interest=music</code> のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 <code>interest</code> の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 PHP を使用したやり方としては、例えば、<a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">単一のサーバー側の変数で複数のチェックボックスを扱う</a>を参照してください。</p>

<h3 id="Checking_boxes_by_default" name="Checking_boxes_by_default">既定のチェックボックス</h3>

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

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

<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p>

<h3 id="Providing_a_bigger_hit_area_for_your_checkboxes" name="Providing_a_bigger_hit_area_for_your_checkboxes">チェックボックスの当たり判定領域を広げる</h3>

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

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

<h3 id="Indeterminate_state_checkboxes" name="Indeterminate_state_checkboxes">未決定状態のチェックボックス</h3>

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

<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre>

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

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

<p>これは以下の例に見られます (この発想は <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> のおかげです)。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。</p>

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

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

<pre class="brush: js notranslate" id="line1">  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 &lt; ingredients.length; i++) {
    ingredients[i].addEventListener('click', updateDisplay);
  }

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

    if(checkedCount === 0) {
      overall.checked = false;
      <strong>overall.indeterminate = false;</strong>
    } else if(checkedCount === ingredients.length) {
      overall.checked = true;
      <strong>overall.indeterminate = false;</strong>
    } else {
      overall.checked = false;
      <strong>overall.indeterminate = true;</strong>
    }
  }</pre>

<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p>

<div class="note">
<p><strong>メモ</strong>: 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。</p>
</div>

<h2 id="Validation" name="Validation">検証</h2>

<p>チェックボックスは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a> (すべての {{HTMLElement("input")}} に対して行われる) に対応しています。しかし、多くの場合 {{domxref("ValidityState")}} は常に <code>false</code> になります。チェックボックスに {{htmlattrxref("required", "input")}} 属性がある場合で、チェックされていない場合、 {{domxref("ValidityState.valueMissing")}} が <code>true</code> になります。</p>

<h2 id="Examples" name="Examples">例</h2>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Choose your interests&lt;/legend&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
      &lt;label for="coding"&gt;Coding&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
      &lt;label for="music"&gt;Music&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="art" name="interest" value="art"&gt;
      &lt;label for="art"&gt;Art&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="sports" name="interest" value="sports"&gt;
      &lt;label for="sports"&gt;Sports&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="cooking" name="interest" value="cooking"&gt;
      &lt;label for="cooking"&gt;Cooking&lt;/label&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input type="checkbox" id="other" name="interest" value="other"&gt;
      &lt;label for="other"&gt;Other&lt;/label&gt;
      &lt;input type="text" id="otherValue" name="other"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;button type="submit"&gt;Submit form&lt;/button&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">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;
}
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]');
var otherText = document.querySelector('input[id="otherValue"]');
otherText.style.visibility = 'hidden';

otherCheckbox.addEventListener('change', () =&gt; {
  if(otherCheckbox.checked) {
    otherText.style.visibility = 'visible';
    otherText.value = '';
  } else {
    otherText.style.visibility = 'hidden';
  }
});</pre>

<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.input.input-checkbox")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。</li>
 <li>CSS の {{cssxref(":checked")}} および {{cssxref(":indeterminate")}} セレクターで、現在の状態に基づいてチェックボックスを整形できます</li>
 <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS プロパティの互換性</a></li>
</ul>