当サイトには広告が含まれております

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

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

1120

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

記事をざっと見る

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

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

ということで

20150120100929

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

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

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

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

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style type="text/css">
        .setsumei {
            padding:5px;
            font-size:1.2em;
            font-weight:bold;
        }
        .contentBlock {
            margin-bottom:15px;
        }
        </style>
        <script type="text/javascript">
        jQuery(function($){
            $(function(){
              $('.colorGroup').on('click', function() {
                if ($(this).prop('checked')){
                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup').prop('checked', false);
                    $(this).prop('checked', true);
                }
              });
            });
        });
        </script>
    </head>
    <body>
        <div style="margin-left:100px;">
            <div class="contentBlock">
                <div class="setsumei">チェックボックスで択一にしたいときはjQueryで可能</div>
                <div>
                <input type="checkbox" name="color" class="colorGroup" value="赤">赤
                <input type="checkbox" name="color" class="colorGroup" value="白">白
                <input type="checkbox" name="color" class="colorGroup" value="黄色">黄色
                </div>
            </div>
        </div>
    </body>
</html>

部分的に説明すると、

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

                <input type="checkbox" name="color" class="colorGroup" value="赤">赤
                <input type="checkbox" name="color" class="colorGroup" value="白">白
                <input type="checkbox" name="color" class="colorGroup" value="黄色">黄色

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

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

        <script type="text/javascript">
        jQuery(function($){
            $(function(){
              $('.colorGroup').on('click', function() {
                if ($(this).prop('checked')){
                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup').prop('checked', false);
                    $(this).prop('checked', true);
                }
              });
            });
        });
        </script>

ここになります。

$('.colorGroup').on('click', function() {

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

if ($(this).prop('checked')){

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

                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup').prop('checked', false);
                    

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

$(this).prop('checked', true);

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

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

20150120101058

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

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

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

20150120101321

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

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

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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (4件)

コメントを残す

記事をざっと見る