장바구니 및 회원가입시 체크박스 구현하기

🛒 장바구니 및 회원가입시 체크박스 구현하기

안녕하세요 TriplexLab 입니다 :)

쇼핑몰을 만들다 보면 흔하게 사용하는 체크박스 구현에 대해서 정리해봤습니다.

채크박스 구현이라는것은 예를 들어서

-전체동의를 클릭하면 동시에 나머지 채크박스도 같이 활성화가 되어야 하고,

- 각각의 약관동의를 채크하면 자동으로 전체동의도 활성화가 되는것을 말합니다.

<div class="order_list">
    <div>
        <input id="fruitItem" class="agreechkAll" type="checkbox" checked="checked" />
        <label for="fruitItem"> 전체선택</label>
    </div>

    <div>
        <input id="chack1" class="chack" type="checkbox" checked="checked" />
        <label for="chack1" class="chack_ele"></label>
    </div>

    <div>
        <input id="chack2" class="chack" type="checkbox" checked="checked" />
        <label for="chack2" class="chack_ele"></label>
    </div>
</div>

 

$(function(){
    var listAll = $("input[type='checkbox'].agreechkAll");    //전체 클릭하는 엘리먼트에 .agreechkAll 클랙스가 추가되어야 한다.
    var list = $("input[type='checkbox'].chack");    //각각 클릭하는 엘리먼트에 .chack 클랙스가 추가되어야 한다.
    var common = {
        allCheck : function(e){ 
            if($(e.target).prop("checked") === true) { 
                //해당화면에 전체 checkbox들을 체크한다 
                list.prop("checked",true);
            } else if($(e.target).prop("checked") === false){
                //해당화면에 모든 checkbox들의 체크를해제 한다. 
                list.prop("checked",false);
            }
        },
        check : function(e){
            if($(e.target).prop("checked") === true){
                $(e.target).prop("checked", true)
            }
            if($(e.target).prop("checked") === false){
                $(e.target).prop("checked", false)
                listAll.prop('checked', false);
            }
            // 각자 하나씩 선택시 자동으로 전채선태도 활성화 시키기
            var size = list.filter(':checked').length;
                if(size == list.length) {
                    listAll.prop("checked", true);
                } else {
                    listAll.prop("checked", false);
                }
            },
        }

    $('.order_list').on('click','.agreechkAll', common.allCheck)
    $('.order_list').on('click','.chack', common.check)
});

제가 정의해놓은 agreechkAll, chack 를 사용하면 어느 프로젝트에 이 로직을 가져다가 사용해도 작동은 잘됩니다.

class 문법으로도 가능하다.

<div class="propslist">
        <div class="wrapper clearfix">
            <h1 class="propslist-tit m:tit-xxl t:tit-xl d:tit-xxxl">Props - List</h1>
            <div class="check-box all-chacked">
                <input type="checkbox" name="vehicle" class="agreechkAll" value="allcheck" id="allcheck">
                <label for="allcheck" class="m:tit-xxxxxs">All Check</label>
            </div>
             <ul class="items">
                <li class="item">
                    <div class="item__inner clearfix">
                        <div class="item__inner--content">
                            <div class="check-box">
                                <input type="checkbox" name="vehicle" class="chack" value="01" id="01">
                                <label for="03" class="m:tit-lg t:tit-xxl d:tit-xxxl">01</label>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="item">
                    <div class="item__inner clearfix">
                        <div class="item__inner--content">
                            <div class="check-box">
                                <input type="checkbox" name="vehicle" class="chack" value="02" id="02">
                                <label for="03" class="m:tit-lg t:tit-xxl d:tit-xxxl">02</label>
                            </div>
                        </div>
                    </div>
                </li>
               <li class="item">
                    <div class="item__inner clearfix">
                        <div class="item__inner--content">
                            <div class="check-box">
                                <input type="checkbox" name="vehicle" class="chack" value="03" id="03">
                                <label for="03" class="m:tit-lg t:tit-xxl d:tit-xxxl">03</label>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</div>

 

<script type="text/javascript">
       (function(){
            var listAll = $("input[type='checkbox'].agreechkAll");
            var list = $("input[type='checkbox'].chack");  

            class Common {
                constructor(ele) {
                    this.ele = ele;
                    this.init();
                }

                init() {
                    this.events();
                }
                events() {
                    var checkboxall = function(e){
                        if($(e.target).prop("checked") === true) { 
                            //해당화면에 전체 checkbox들을 체크한다 
                            list.prop("checked",true);
                        } else if($(e.target).prop("checked") === false){
                            //해당화면에 모든 checkbox들의 체크를해제 한다. 
                            list.prop("checked",false);
                        }
                    };

                    var checkbox = function(e){
                        if($(e.target).prop("checked") === true){
                            $(e.target).prop("checked", true)
                        }
                        if($(e.target).prop("checked") === false){
                            $(e.target).prop("checked", false)
                            listAll.prop('checked', false);
                        }
                        // 각자 하나씩 선택시 자동으로 전채선태도 활성화 시키기
                        var size = list.filter(':checked').length;
                        if(size == list.length) {
                            listAll.prop("checked", true);
                        } else {
                            listAll.prop("checked", false);
                        }
                    };

                    this.ele.on('click','.agreechkAll', checkboxall);
                }
            }

           new Common($('.propslist'));
    })();
</script>