チェックボックスを択一にするjQuery書いてみました

1120

チェックボックスは通常複数選択できるものなのですが、それを択一にしたいというご要望がありました。こういうのはjQueryが得意なのでjQuery でラジオボタンみたいに択一になるように書いてみました。かなり簡単ですのでお試しください。

普通のチェックボックスとラジオボタンの動き

通常チェックボックスは複数選択可能にしたいときに使います。ラジオボタンはどれか1つだけを選択して欲しいときに使います。

ということで

20150120100929

こんな感じの動きだと思います。
サンプルページ

ラジオボタンだと一度チェックを付けると外すことができない

ラジオボタンだと一度チェックを付けるとどれも選ばない状態にすることができません。そこでチェックボックスなら全てを未選択にできるのでチェックボックスにしてなおかつ1つしか選べないようにしたいという場合があったりします。

これをjQueryでこんな感じに書いて実現しました。

部分的に説明すると、

というところでjQueryを使えるようにライブラリを読み込みます。

3つのチェックボックスに colorGroup という名前のclassを指定しておきます。

実際にjQueryで動作させてる部分は

ここになります。

上はcolorGroupというclass指定のあるものを クリックしたときにここに来るようになります。

ここで this(今クリックした要素) が チェックされていたら と聞きます

ここで colorGroupというclass指定のしてある、checkedをfalse(チェックを外す)にします。3つとも一度ここでチェックが外れます。

全部のチェックを外してから、this(今クリックした要素)checkedをtrue(チェックを付ける)にします。

これでチェックは1つしかつかないが実現します。

20150120101058

こんな感じです。1つしか付かないし、全部外すこともできます。
サンプルページ

radioボタンで未選択をするこんな方法もあります

好みによりますが、jQueryを使わなくてもradioボタンで未選択をする方法があります。

20150120101321

こんな感じに「(未選択の項目)なし」を選択肢に入れておく方法です。
サンプルページ

またこのようにjQueryでは色々なことができるのでおそらくラジオボタンのとなりに「全部未選択に戻す」かなんかのボタンを作ってそれをクリックしたときにラジオボタンをすべて未選択にするとかもできそうですね。

最近jQueryが色々面白くなってきて、以前買って読んだこの本の新版が出たようなのでまた買ってみようかなと思っています(^^)/。とっても分かりやすかったです。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. おさむ より:

    兎本さま、

     ありがとうございました。
     参考になりました。

トップへ戻る