HTML Academy · レッスン

チェックボックスとラジオボタンのグループ

Q: 「チェックボックスとラジオボタンのグループ」で何を学びますか？

グループから1つまたは複数の選択肢を選べるようにします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

グループから1つまたは複数の選択肢を選べるようにします

「チェックボックスとラジオボタンのグループ」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

チェックボックス

チェックボックスを使用すると、ユーザーは0個、1個、または複数のoptionを選択できます。

<label>
  <input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>

<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>

チェックボックスの送信

チェックボックスは、チェックされている場合にのみ送信されます。

<form>
  <input type="checkbox" name="hobby" value="reading"> Reading<br>
  <input type="checkbox" name="hobby" value="coding"> Coding<br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
     hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->

fieldsetを使用したチェックボックスのグループ化

fieldset + legendを使用して、関連するチェックボックスをグループ化します。

<fieldset>
  <legend>Select your interests</legend>

  <label><input type="checkbox" name="interest" value="html"> HTML</label>
  <label><input type="checkbox" name="interest" value="css"> CSS</label>
  <label><input type="checkbox" name="interest" value="js"> JavaScript</label>
  <label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>

ラジオボタン

ラジオボタンを使用すると、ユーザーはグループ内から1つだけoptionを選択できます。

<fieldset>
  <legend>Preferred plan</legend>

  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
  <label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->

checked属性

checked属性を使用して、ラジオボタンまたはチェックボックスをあらかじめ選択します。

<fieldset>
  <legend>Skill level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="intermediate"> Intermediate</label>
  <label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>

チェックボックスとラジオボタンのスタイル設定

labelの仕組みを使用した、カスタムスタイルのチェックボックスです。

<label class="custom-check">
  <input type="checkbox" name="agree">
  <span class="checkmark"></span>
  I agree
</label>

/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #ddd; border-radius: 3px;
  display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }

indeterminate状態

チェックボックスには、チェック済みでも未チェックでもないindeterminate状態を設定できます。

<input type="checkbox" id="select-all">

<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>

デフォルト選択なしのradio

ラジオボタンをあらかじめ選択しないほうがよい場合もあります。

あらかじめ選択すると、そのoptionが推奨されていることを示すためです
明確なデフォルトがない必須の選択（性別やプランなど）では、未選択のままにします
requiredを追加して、ユーザーが明示的に選択するようにします

<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="m" required> Male</label>
  <label><input type="radio" name="gender" value="f" required> Female</label>
  <label><input type="radio" name="gender" value="nb" required> Non-binary</label>
  <label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>

チェックボックス：checkedとvalueの違い

チェックボックスの送信について重要な点が2つあります。

<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->

<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked);    // true or false
console.log(cb.value);      // 'yes' (always, even when unchecked)

ラジオグループのキーボード操作

ラジオグループのキーボード操作は次のとおりです。

Tabでグループ内の選択されたラジオボタン、または最初のラジオボタンにフォーカスを移動します
矢印キー（↑/↓または←/→）でoptionを順番に移動します
Tabでグループの外にある次のフォーカス可能な要素へ移動します

すべて選択するパターン

すべてのチェックボックスを選択または選択解除するパターンです。

<label>
  <input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
  <label><input type="checkbox" class="item" value="1"> Item 1</label>
  <label><input type="checkbox" class="item" value="2"> Item 2</label>
  <label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
  document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>

クイックチェック

ラジオボタンを同じグループに所属させるには、name属性をどのように設定しますか？

まとめ：チェックボックスとラジオボタン

チェックボックスとラジオボタンの基本事項です。

チェックボックス — 複数選択に使用し、チェックされている場合にのみ送信します
ラジオボタン — 1つだけ選択し、nameでグループ化します
どちらもchecked属性であらかじめ選択します
<fieldset> + <legend>で囲みます
矢印キーでラジオグループ内を移動します

よくある質問

「チェックボックスとラジオボタンのグループ」レッスンは無料ですか？

はい。「チェックボックスとラジオボタンのグループ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「チェックボックスとラジオボタンのグループ」で何を学びますか？

グループから1つまたは複数の選択肢を選べるようにしますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「チェックボックスとラジオボタンのグループ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る