Jquery/複数チェックの同意項目ボタンを作る

URLをコピーしました！

規約や個人情報の扱いについて複数同意チェックしないとボタン等を押せないようにしたいときのJS。
チェックボタンは何個でも対応したJS。
ifの条件分岐を書き換えれば、全項目チェック必須ではなく、１０個選択中３つ選択必須などの個数選択ボタンにも使えそう。

複数チェックの同意項目ボタン

See the Pen Jquery/複数チェックボタンの同意項目 by maco (@tmozou) on CodePen.

二つの同意ボタンがあり、両方チェックすると、下部のボタンが押せるようになる。
１個チェックだけや、２個チェックして後から１個チェックを外しても、ボタンは押せなくなる。

JQuery動作の流れ

JQueryのソースと動作の流れは、下記。

function inputChange(){

    var count = $('.btn01').length;
    var checkcount = $('input:checked.btn01').length;

    $(function(){
        if(count == checkcount){
            $('.btn').addClass('btn-On');
        }else{
            $('.btn').removeClass('btn-On');
        };
    });
};

「class=”btn01″」の個数を数える
チェックボックスにチェックが入った時の「checked」属性の数を数える
１と２の数がイコールであれば、下部ボタンに「btn-On」のclassを付与。ボタンを可視にして押せるようにする。
一度イコールになって下部ボタンに「btn-On」のclassを付与されても、チェックが外されてイコールではなくなったらclass「btn-On」を削除して、ボタンを不可視にする。

汎用性があり、できるだけシンプルな条件分岐にしたかったので、チェックボックスとチェック入った状態をそれぞれ「length」で数えさせた。

JQuery動作デモ―複数チェックの同意項目ボタン

JQuery動作チェック用のデモ（チェックボックス５個タイプ）。
チェックボタンの数と、チェックされた数の個数がちゃんとカウントされているか確認。

See the Pen JQuery動作デモ―複数チェックの同意項目ボタン by maco (@tmozou) on CodePen.

任意複数チェックボタンの応用

ついでに任意個数チェック用JSも作ってみた。
３個以上や３個限定など、特定数チェックで下部ボタンが押せるようになる。
チェック個数は必要に応じて修正。
上の５個チェックボックスのデモで使っているJSを入れ替えれば動作チェックできる。

３個以上チェック

    $(function(){
        if( 3 <= checkcount){
            $('.btn').addClass('btn-On');
        }else{
            $('.btn').removeClass('btn-On');
        };
    });

３個限定チェック（任意個数固定）

    $(function(){
        if( 3 == checkcount){
            $('.btn').addClass('btn-On');
        }else{
            $('.btn').removeClass('btn-On');
        };
    });

CSSだけでも複数同意項目のチェックボタンは作れる

条件分岐の複数同意項目のチェックボタンはCSSでは挙動が難しく、Javascript等で作ることが多かったが、疑似クラスhas()が使えるようになったことでCSSでも同意項目チェックボタンが作れるようになった。
上と同様に特定個数チェックでの条件分岐もhas(）で作れそう。

しかし、同意チェックが増えたり、特定個数チェックだったりと、分岐条件が増えるとCSSが複雑になって保守メンテが大変になる。
なので、同意項目２，３個ぐらいまでならCSSで作ってもいいが、それ以上複雑になる場合は、やはりＪＳで制御したほうが無難なきがする。

以下、自分が作ったCSSの同意項目チェックボタン