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

この記事は約7分で読めます。

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が色々面白くなってきて、以前買って読んだこの本の新版が出たようなのでまた買ってみようかなと思っています(^^)/。とっても分かりやすかったです。

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット JQuery
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. おさむ より:

    兎本さま、

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

  2. pao K より:

    やりたい事が、ラジオボタンではなく、こちらの方法で実現できました。
    ありがとうございます!

    • 兎本美佳兎本美佳 より:

      pao Kさん、こんにちは!ご利用ありがとうございます。記事がお役に立てたこと、コメントいただいてわかってうれしく思います!

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。