左坊のメモ帳

WordPress など

*

HTMLのformのラジオボタン、チェックボックスで、文字をクリックした時にチェックを入れる方法

      2018/09/04

ボタンだけでなく、ラジオボタンやチェックボックスの項目をクリックした時にチェックを入れたり、外したりするには

labelタグでforを使います。

スポンサーリンク

概要

フォームのラジオボタンやチェックボックスでは、通常、ボタンそのものをクリックしないとチェックが入りませんが、項目(文字)をクリックした時にもチェックを入れるようにします。

inputタグのidと、labelタグのforを一致させます。

<input type=”radio” id=”hoge”><label for=”hoge”>選択肢</label>

ラジオボタン

サンプル

普通のラジオボタン。

ラジオボタンの項目1
ラジオボタンの項目2
ラジオボタンの項目3

項目もクリッカブルなラジオボタン



htmlソース

<form>
 <input type="radio" name="rdbtn" value="1">ラジオボタンの項目1
 <input type="radio" name="rdbtn" value="2">ラジオボタンの項目2
 <input type="radio" name="rdbtn" value="3">ラジオボタンの項目3
</form>
<form>
 <input type="radio" name="rdbtn2" id="rbtn1" value="1">
  <label for="rbtn1">ラジオボタンの項目1</label>
 <input type="radio" name="rdbtn2" id="rbtn2" value="2">
  <label for="rbtn2">ラジオボタンの項目2</label>
 <input type="radio" name="rdbtn2" id="rbtn3" value="3">
  <label for="rbtn3">ラジオボタンの項目3</label>
</form>

チェックボックス

サンプル

普通のチェックボックス。

チェックボックスの選択肢1
チェックボックスの選択肢2
チェックボックスの選択肢3

選択肢もクリッカブルなチェックボックス。



htmlソース

<form>
 <input type="checkbox" name="ckbx1" value="1">チェックボックスの選択肢1
 <input type="checkbox" name="ckbx1" value="2">チェックボックスの選択肢2
 <input type="checkbox" name="ckbx1" value="3">チェックボックスの選択肢3
</form>
<form>
 <input type="checkbox" name="ckbx2" value="1" id="chk1">
  <label for="chk1">チェックボックスの選択肢1</label>
 <input type="checkbox" name="ckbx2" value="2" id="chk2">
  <label for="chk2">チェックボックスの選択肢2</label>
 <input type="checkbox" name="ckbx2" value="3" id="chk3">
  <label for="chk3">チェックボックスの選択肢3</label>
</form>

 - CSS・html