iPentec.com / Doc / HTML / HTMLタグ / HTML チェックボックス

チェックボックスの右側の文字列をクリックすると、チェックボックスのチェック状態が変更できるようにしたい - HTML

チェックボックスの右側の文字列をクリックすると、チェックボックスのチェック状態を変更する方法を紹介します。

概要

チェックボックスのタグではチェックボックスを配置できますが、チェックボックスの説明テキストは別途文字列を記述する必要があります。単純に文字列を記述しただけでは文字列をクリックした際にチェックボックスのチェック状態を変更することはできません。チェックボックスの説明文をクリックした際にチェック状態を変更する場合は、label タグを利用します。

書式

<input id="(チェックボックスのID)" type="checkbox" /><label for="(チェックボックスのID)">チェックボックスの説明</label>

labelタグの文字列をクリックすると、for属性で指定したチェックボックスのチェック状態が変化します。

例

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  チェックボックスの表示テスト<br />
  <div>
    <input type="checkbox" id="checkbox1" /><label for="checkbox1">チェックボックス1です。</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox2" /><label for="checkbox2">チェックボックス2です。</label>
  </div>
</body>
</html>

解説

チェックボックスを2つ表示し、それぞれにチェックボックスのキャプションをlabelタグで表示します。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。

チェックボックスの右側の[チェックボックス1です]の文字列をクリックします。文字列をクリックした場合でもチェックボックスのチェック状態が変化することが確認できます。

[チェックボックス2です]の文字列をクリックした場合は下のチェックボックスのチェック状態が変化します。labelタグのfor属性で指定したIDのチェックボックスのチェック状態が変化することが確認できます。

参考 : labelタグを利用しない場合

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  チェックボックスの表示テスト<br />
  <div>
    <input type="checkbox" id="checkbox1" />チェックボックス1です。
  </div>
  <div>
    <input type="checkbox" id="checkbox2" />チェックボックス2です。
  </div>
</body>
</html>

Labelタグを利用しない記述でもチェックボックスの右側にテキストを表示することはできます。ただしテキストをクリックしてもチェックボックスのチェック状態は変化しません。