ラジオボタン の文字を押したら選択できるようにしよう

はじめに

ラジオボタン って選択する時に押さないとチェック欄押さないと反応しないんですが、これ文字を押したときにでも選択できるようにできないですか?
ラジオボタンの文字を押したときに選択をすることは可能ですよ。
jsとか書かないとダメですか?
いいえ ラベルを指定して、ラジオボタン のidとlabelのforを合わせるだけで可能です。サンプルを使ってご紹介したいと思います。

ラジオボタンのラベルをクリックしたときに選択させてみよう

ラジオボタンのラベルをクリックしたときに、そのラジオボタンが選択されるようにhtmlを記述していきたいと思います。書き方は非常に簡単で、inputのラジオボタンにidをふります。その後そのidをlabelのforと合わせるだけになります。

<input type="radio" name="radio" id="select_radio1"><label for="select_radio1">文字を押しても選択できるようになった!</label>
<input type="radio" name="radio" id="select_radio2"><label for="select_radio2">文字を押しても切り替えてみよう</label>

上記のコードを実装すると次のようになります。


上記の文字を押すとそれに対応したラジオボタンの選択肢が選択されるようになったのではないでしょうか?

関連記事

  1. htmlの文字化け

  2. HTML箇条書きを書く

  3. htmlで番号付きのリストを作ろう

  4. videoタグを使って動画を埋め込んでみよう

  5. HTMLでラジオボタン を作ってみよう

  6. 画像をhoverして時にズームさせるcssを書こう

2024年4月
1234567
891011121314
15161718192021
22232425262728
2930  
Translate »