フォームヘルパのラジオボタンなどで、ラベルクリック応答を実現したい

2021年2月4日 at 11:24

フォーラムの皆さま

 おはようございます。
いつも暖かいご支援をいただき、ありがとうございます。
外部フォームで、フォームヘルパの「ラジオボタン」や
「チェックボックス」を配置しておりますが、

通常のHTML5に見られるように、ラジオボタンだけではなく、
後ろにつくラベルをクリックしたときにも、ラジオボタンが
セレクトされた状態にしたいと思っております。

HTML5の例
<input type="radio" name="gakubu" id="L" value="1"><label for="L">法学部</label>

上記のように記述しますと、ラジオボタンとラベルどちらをクリックしても
ラジオボタンが選択されます。

フォームヘルパの例
フォームヘルパのラジオボタンで、buttonvalue という属性がございますが、
これがinputタグのidに該当すると思い、
<?=$form->radio('gakubu', 'L', '1')?><label for="L">①法学部</label>
としてみましたが、ページ上ではラベルをクリックしてもラジオボタンは
選択できませんでした。

方法がございましたら、お教えいただけますと幸いです。
どうぞよろしくお願い致します。

タグ:

Re: フォームヘルパのラジオボタンなどで、ラベルクリック応答を実現したい

2021年2月4日 at 14:11
フォーラムの皆さま

 いつもお世話になっております。
おかげさまで、自己解決いたしました。

フォームヘルパで設置した部品を<label>タグで囲むことで実現できました。

【Before】
<div class="form-group border col-sm-2"><?=$form->radio('gakka', '1')?>法学科</div>

【After】
<div class="form-group border col-sm-2"><label><?=$form->radio('gakka', '1')?>法学科</label></div>

取り急ぎ、ご報告申し上げます。