[JQuery] CheckBox 전체 선택 하기과 해제

     

     

      준비 과정 - HTML 활용하기

    <div id="check_all">
        <label for="chk_select_00">
            <input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
        </label>
        <label for="chk_select_01">
            <input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
        </label>
        <label for="chk_select_02">
            <input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
        </label>
    </div>

     checkbox의 전체선택하는 방법은 의외로 간단하다.

     

    checkbox를 묶는 상위 테그를 생성하면 쉽게 만들 수 있다.

    여기서는 알기 쉽게 div 테그를 생성하였고 check_all이라는 명칭을 주었다.

     

     

     

     

      전체 선택 만들기

    <body>
    
    <h3>체크박스 </h3>
    
    <div id="check_all">
    <label for="chk_select_00">
        <input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
    </label>
    <label for="chk_select_01">
        <input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
    </label>
    <label for="chk_select_02">
        <input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
    </label>
    </div>
    <script src="js/jquery.3.6.0.min.js"></script>
    <script src="js/ui.js"></script>
    <script>
    
        $('#chk_select_00').click(function() {
    
            $('#chk_select_00').parents('#check_all').find('input').prop('checked', true);
    
        })
    
    
    </script>
    </body>

     전체checkbox를 클릭할 경우, 나머지 checkbox도 모두 체크된다.

     

    Jquery의 Click을 활용하여, 전체 채크 할 수 있도록 만들었다.

     

     

    그러나 여기서, CheckBox는 click으로 할 경우 문제가 발생한다. checkBox를 click으로만 받을 경우, true와 false의 구분이 한 박자 느린 결과를 보여준다.

    따라서 checkBox는 change를 사용하는 것이 더 명확하다.

     

     

     

      전체 선택 체크하기 마무리

    <body>
    
    <h3>체크박스 </h3>
    
    <div id="check_all">
    <label for="chk_select_00">
        <input type="checkbox" name="chk_area" id="chk_select_00" value="00" > 전체
    </label>
    <label for="chk_select_01">
        <input type="checkbox" name="chk_area" id="chk_select_01" value="01" > 체크
    </label>
    <label for="chk_select_02">
        <input type="checkbox" name="chk_area" id="chk_select_02" value="02" > test
    </label>
    </div>
    <script src="js/jquery.3.6.0.min.js"></script>
    <script src="js/ui.js"></script>
    <script>
    
        $('input[name="chk_area"]').change(function() {
    
            //전체 클릭은 value가 00이다. checkbox true 여부 확인하다.
            if($(this).is(':checked', true) && $(this).val() == '00') {
                $(this).parents('#check_all').find('input').prop('checked', true);
    
            } else if($(this).val() == '00'){
                $(this).parents('#check_all').find('input').prop('checked', false);
            }
    
        })
    
    
    </script>
    </body>

    이제 블로그 작성을 위해서 checkBox를 응용하는 간단한 동작문구를 작성하였다.

     

    name을 통해서, checkBox의 Event처리를 실행하며, checkBox의 결과값을 통해 '전체'인지 아닌지를 구분한다.

    여기서 구분값의 기준은 value의 값이 '00'이다.

     

    코드의 활용을 좀 더 간결하게 하기 위해서 this를 활용하였다. 

     

     

    코드는 정상적으로 전체 선택과 해제가 동작된다.

     

     

     

     

    전체 선택과 해제는 생각보다 쉽게 끝났다.

    그러나 사용자가 편할수록 개발자가 힘들다는 말이 맞는지, 좀 더 세심한 기능을 하다보니 너무 힘들다.

     

     

    이 글을 작성하는 이유는, 전체 선택을 위해 FOR문을 돌리는 일이 없기를 바라며...

     

     

     

    반응형

    댓글

    Designed by JB FACTORY