はじめに
checkboxはclickを認識しない、と思ってdivバージョン、buttonバージョンを作ってきたのですが、checkboxのlabelではclickを認識するだけでなく、onDoubleClickも使える!!!!
と言うことを発見して、それならばcheckboxが一番便利なはず、と元に戻って作りました。
実行例
See the Pen shogun-checkbox-double by kalz2q (@kalz2q) on CodePen.
説明
checkboxではform, input type="checkbox", label htmlForの3箇所のどこにどの属性を入れるか、key, id, classNameなど、よくわからない。わからなくでもやってみるとわかることもあるだろうと、試行錯誤しました。
結論: 基本的にformとか、inputとか上のレイヤーに付けるのではなく、中身につける。