<fieldset>  <legend>Choose your monster's features:</legend>  <div>    <input type="checkbox" name="scales" checked />    <label for="scales">Scales</label>  </div>  <div>    <input type="checkbox" name="horns" />    <label for="horns">Horns</label>  </div></fieldset>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

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

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

メモ:フォームが送信されたとき、チェックボックスがチェックされていない場合、名前も値もサーバーに送信されません。HTML のみでチェックボックスがチェックされていない状態を表す方法（value=unchecked のように）はありません。チェックボックスがチェックされていないときの既定値を送信したい場合は、JavaScript を記述して、フォーム内にチェックされていない状態を示す値を持つ<input type="hidden"> を作成することで実現できます。

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

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

inputInstance.indeterminate = true;

メモ:これは純粋に視覚的な変更です。チェックボックスのvalue がフォーム送信に使用されているかどうかには影響しません。これはchecked の状態によって決定され、indeterminate の状態とは関係ありません。

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;  }}

<form>  <fieldset>    <legend>興味のあるものを選択してください</legend>    <div>      <label>        <input type="checkbox" name="interest" value="coding" />        コーディング      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="music" />        音楽      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="art" />        美術      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="sports" />        スポーツ      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="cooking" />        料理      </label>    </div>    <div>      <label>        <input type="checkbox" name="interest" value="other" />        その他      </label>      <input        type="text"               name="other"        aria-label="Other interest" />    </div>    <div>      <button type="submit">フォームを送信</button>    </div>  </fieldset></form>

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;}

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";  }});

Help improve MDN

This page was last modified on⁨2025年7月22日⁩ byMDN contributors.