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

<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処理も前向きに検討して良いように思えます。