LoginSignup
15

More than 5 years have passed since last update.

スマホでラジオボタンやチェックボックスを使う場合の注意

Posted at

通常、フォームを使うときは、labelタグを使って選択しやすくすると思います。
しかし、スマホではlabelで囲った部分をタップしても反応しないことがあるので、ちゃんと対策しないといけません。
これは、labelがタップされるためのものと認識されていないためなようです。

方法は2つあります。

pointer

cssで指定する。

label{
    cursor:pointer;
}

onclick

labelにonclickを追記する。

<input type="radio" id="sunflower" name="flower" /><label for="sunflower" onclick="">ひまわり</label>
//または
<label onclick=""><input type="radio" name="flower" />チューリップ</label>

jQueryで書く。

$("label").click(function() {});

jQeryの方が一括指定できるので便利だが、他のjQueryなどと競合する場合もあるので注意。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15