NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

グループ内で1つだけチェックできるチェックボックスを作る

bell賞味期限切れコンテンツ

この記事は公開または最終更新から408日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

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

今回必要な条件は、

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

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

使い方

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

これだけでOK。

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

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

デモ

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

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

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

 

TAGS