<input type="checkbox"> - HTML

この記事では

この例では、両方のチェックボックスに同じ name を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は interest=coding&interest=music のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 interest の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 Python を使用したやり方としては、例えば、単一のサーバー側の変数で複数のチェックボックスを扱うを参照してください。

`既定のチェックボックス`

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

html 関心があるものを選んでくださいコーディング音楽

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

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

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

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

チェックボックスは未決定 (indeterminate) 状態にすることができます。これは JavaScript から HTMLInputElement オブジェクトの indeterminate プロパティを使用して設定します（HTML の属性を使用して設定することはできません）。

js inputInstance.indeterminate = true; indeterminate が true である場合、多くのブラウザーでは、チェックボックスにはボックス内にチェックの代わりに水平線（ハイフンやマイナス記号のように見えるもの）が引かれます。メモ: これは純粋に視覚的な変更です。チェックボックスの value がフォーム送信に使用されているかどうかには影響しません。これは checked の状態によって決定され、 indeterminate の状態とは関係ありません。このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション（チェックボックス）を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1 つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。これは以下の例に見られます（この発想は CSS Tricks のおかげです）。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。チェックがない場合、製作手順名のチェックボックスは未チェックになります。 1 つまたは 2 つがチェックされた場合、製作手順名のチェックボックスは indeterminate に設定されます。 3 つともチェックされた場合は、製作手順名のチェックボックスが checked に設定されます。ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に indeterminate が使われます。 js const overall = document.querySelector("#enchantment"); const ingredients = document.querySelectorAll("ul input"); overall.addEventListener("click", (e) => { e.preventDefault(); }); for (const ingredient of ingredients) { ingredient.addEventListener("click", updateDisplay); } function updateDisplay() { let checkedCount = 0; for (const ingredient of ingredients) { if (ingredient.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; } }

`検証`

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

`例`

次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。これは JavaScript の短いブロックで実現します。この例では、が直接の中にあり、暗黙のラベルを含んでいます。目に見えるラベルのないテキスト入力は、aria-label を指定すると、指定されたアクセス可能な名前を提供することができます。この例では、スタイル設定を改善するためにいくつかの CSS も記載しています。

`HTML`

html


  
    興味のあるものを選択してください
    
      
        
        コーディング
      
    
    
      
        
        音楽
      
    
    
      
        
        美術
      
    
    
      
        
        スポーツ
      
    
    
      
        
        料理
      
    
    
      
        
        その他

`CSS`

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`

js

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

`技術的概要`

値	チェックボックスの値を表す文字列。
イベント	`change` および `input`
対応している共通属性	`checked`
IDL 属性	`checked`、`indeterminate`、`value`
DOM インターフェイス	`HTMLInputElement`
メソッド	`select()`
暗黙の ARIA ロール	`checkbox`

`仕様書`

Specification
HTML # checkbox-state-(type=checkbox)

`ブラウザーの互換性`

関連情報 :checked, :indeterminate: CSS のセレクターで、現在の状態に基づいてチェックボックスを整形できます HTMLInputElement: HTML DOM API において要素が実装しているもの Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 2025年4月20日 by MDN contributors. View this page on GitHub • Report a problem with this content