それならラジオボタンを使えよって感じですが、任意にオンオフできて、更にグループ内で１つだけを選択できるチェックボックスが必要になったので考えてみました。

今回必要な条件は、

• チェックボックスで実装（リセットボタンなどを使わずに任意にON/OFFできる）
• ラジオボタンのように、グループ間で１つだけをONにできる
• 複数グループがあった場合、グループ毎に動作する

ッて感じでしたので、こんな感じになりました。

使い方

1. チェックボックスを作成し、グループごとにカスタムデータ属性「data-scgroup」にグループ識別子を与えます。
2. そのチェックボックス群を「.singlecheck」クラスをもった要素でラップします。

これだけでOK。

チェックボックス群は整列するときにリストとか使うことが多いと（個人的には）思うんで、 <ul></ul> とか   <ol></ol>  要素に対してクラスを与えると楽です。（デモでもそういう風に使ってます）

本当は作ってる途中で「.singlecheck」の要素ごとにグループ分けでも良いかなと思ったんですが、グループ識別は別にしておいたほうが小回りが効きそうなのでそのままにすることにしました。

デモ

デモでは色毎にグループが指定がしてあり、一部はリストを跨いています。

多分こんな組み合わせで使うことはまず無いでしょうが、そこはそれ。デモなので。

使いみちは…今関わってる案件以外じゃあんまり無いかもしれませんが…将来需要が出てきた時のために残しておくってことで。