スマホでのチェックボックスの挙動は、labelタグよりJS処理の方がレスポンスが良い

goto_jp 511views 更新:2014年11月5日
<label for="check1"><input type="checkbox" id="check1">チェック</label>

上記のようにlabelタグをクリックでチェックボックスにチェックを入れるのはポピュラーな手法です。

スマホUIを作るにあたって行全体をタップさせたいと考え、下記のように親要素にonclickでチェックボックスのON/OFFを行う処理を試してみました。

<div onclick="checkToggle('check1')"><input type="checkbox" id="check1">チェック</div>

実機で両者の挙動を試したところ、iPhone、Androidともに後者のJS処理の方がチェックのレスポンスが体感的に良く感じられました。

ごくシンプルなモックで試したものなので平行して走るJSの状況などで変わるとは思いますが、labelタグによる挙動は若干モッタリした反応が見られ、タップ時のハイライト範囲もlabelの範囲がモロに出るのでJS処理も前向きに検討して良いように思えます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません