체크박스를 이용한 필터만들기 + 전체체크

전체선택 기능이 있는 체크박스를 또 만들어봤습니다. ㅎㅎ

다 만들고 반디캠을 찍어봤어요. 허접하지만 동영상까지 있는 글을 쓰다닝

전체선택 체크박스

HTML

    <ul class="filter_wrap">
        <li><input type="checkbox"><label class="filter01 all">ALL</label></li>
        <li><input type="checkbox"><label class="filter01">필터01</label></li>
        <li><input type="checkbox"><label class="filter01">필터02</label></li>
        <li><input type="checkbox"><label class="filter01">필터03</label></li>
        <li><input type="checkbox"><label class="filter01">필터04</label></li>
    </ul>

html은 간단하게 ul태그로 만들고, li안에 체크박스 input과 label태그를 만들었어요. css로 input 태그는 안보이게, label를 버튼처럼 만들었습니당.

 

CSS

.filter_wrap li{
    display: inline-block;
}
.filter_wrap label{
    border:1px solid #000;
    padding: 3px 7px;
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0;
    cursor: pointer;
    margin-bottom: 0;
}
.filter_wrap input{
    display: none;
}
.filter_wrap input:checked + label{
    border:1px solid rgb(218, 66, 66);;
    background-color: rgb(218, 66, 66);
    color:#fff;
}

클릭시 (체크시) 색상이 바뀌게 만들었어요!

 

JAVASCRIPT

function chekced(obj){ //체크하기
    obj.parentNode.querySelector('input').checked = true;
}
function unChekced(obj){ //체크해제
    obj.parentNode.querySelector('input').checked = false;
}
 
 
const filter01 = document.querySelectorAll('.filter01'); // 체크버튼
const filterAll  = document.querySelector('.all'); // 'all' 체크버튼
 
filter01.forEach(function(el){
    el.addEventListener('click', function(e){
        if(e.target == filterAll){
            if(e.target.parentNode.querySelector('input').checked !== true){
                filter01.forEach(function(obj){
                    chekced(obj); //모두체크
                })
            }else{
                filter01.forEach(function(obj){
                    unChekced(obj); //모두해제
                })
            }
        }else{
            if(e.target.parentNode.querySelector('input').checked !== true){
                chekced(e.target);
                const checked = document.querySelectorAll('.filter_wrap input:checked');
                if(filter01.length -1 == checked.length){ //모두 체크되어있다면 all도 체크
                chekced(filterAll);
                }
 
            }else{
                unChekced(e.target); 
                unChekced(filterAll); //한개라도 체크 안되면 all버튼 체크 해제
            }
        }
 
 
 
    })
})

 자바스크립트는 옆에 살짝 설명을 적어보았습니덩

 

저번에 만들 일이 있어서 만들었다가 블로그 올린다고 다시 만들었는데, 왜 만들때마다 다르게 되는걸까요?

만든 파일도 올려보아용!

CHECKALL.zip

0.00MB