周囲クリックでチェックボックスを制御する

2019年3月22日

chkbox はフォームで選択処理を行う際に、複数選択が可能なinput要素です。t通常は小さな四角をクリックしたときのみ反応します。

ただ、スマホ等ではクリックしにくいので、chkboxの周囲をスタイルシートでブロック化し、周囲をクリックしたら反応するようにしてみようと思ったのですが、思いのほか苦労したので忘備録として残します。

イメージはこんな感じです。

サクッと作ってみたものがこちらです。
サンプル1

周囲をクリックしたら、chkboxにチェックされます。
簡単簡単と思ったら、不具合がありました。

肝心のチェックボックス部分をクリックしたら反応しません…。
原因を調べたら、チェックボックス部分をOFF→ONにしたときに、スクリプトでOFF→ONに戻る処理をしていました。

チェックボックス自体はスクリプトを使用しなくても動作するため当然といえば当然です。

なので、チェックボックス自体をクリックした場合は、チェック処理をスキップするように直しました。

改良版がこちらです。

チェックボックスダイレクトクリックも反応するバージョン

javascriptのeventで、クリックされたタグの名称を取得し、チェックボックス(input)ならばスキップするようにしました。

周囲クリックでも、チェックボックスクリックでも反応します。
今度こそ完璧・・・・と思っていたらまだ不具合がありました。

firefoxで動かなくなっていました。
原因を調べるべくググッてみたら、javascriptのeventは、firefoxで発火しないとありました…。

あと一息なのに・・・

でも、firefoxでも発火させる方法がありました。

firefoxでeventを扱う場合は、function()の引数省略をしなければ動くということがわかりました。

どういうことかというと、以下のようにclickでファンクションコールの際に、以下のように記述していますが、

$(“ul > li”).click(function()

これを以下のように、function()にevent引数を与えるだけでＯＫでした。

$(“ul > li”).click(function(event)

そのバージョンがこちら

firefoxでも動くようになりました。

やればなんとかなるものです。