채택완료

전체 체크박스 해제/선택에서, 부분 선택할 경우 이게 궁금합니다.

2021-06-29 (화) 10:27:58 2,383

안녕하세요.

http://manghal.co.kr/sub/check.php

여기에서..

"약관 및 수신을 모두 동의"할 경우

아래 id=send 인 버튼에 addClass=on 을 하게 했습니다.

이건 잘 되고있습니다.

그런데..

"약관 및 수신을 모두 동의"하지 않고

개인정보와 sms 개별로 체크햇을 경우

둘다 체크하면 "모두 동의" 체크가 되게까지는 했는데요.

모두 동의 체크햇을때처럼 addClass=on 이 되게하려면 소스에서 어떤걸 수정해야할까요? ㅠ

2009076013_1624930013.0599.jpg

<code>

                    // 체크박스 전체 선택
                    $(".user-check-tit").on("click", "#cb1", function () {
                        $(this).parents(".user-check-tit").find('input').prop("checked", $(this).is(":checked"));

                        $('#send').addClass('on');
                    });

                    // 개별 체크박스 선택시
                    $(".user-check-tit").on("click", ".normal", function() {
                        var is_checked = true;

                        $(".user-check-tit .normal").each(function(){
                            is_checked = is_checked && $(this).is(":checked");

                            // 모두 동의가 돼잇을 경우, on 클래스 해제 
                            $('#send').removeClass('on'); 
                        });

                        $("#cb1").prop("checked", is_checked);
                    });

</code>

답변 2개 / 댓글 2개

채택된 답변
+20 포인트
Copy
<script>

$(document).ready(function() {
    $(".normal").change(function(){
        if($("#cb2").is(":checked") == true && $("#cb3").is(":checked") == true){
            $('#send').addClass('on');
        }else{
            $('#send').removeClass('on');
        }
    });
});

</script>

이렇게 하셔도 되실거에요.

답변에 대한 댓글 1개

2021-06-29 (화) 13:28:46
감사합니다!!

이리 하니 되네요. ㅠ
2021-06-29 (화) 11:40:45

each() 하지 마시고 

갯수를 비교하면 어떨까요? 

.user-check-tit 이 클래스는 스타일을 위한 클래스로만 사용하시고

개별 선택 체크박스는 컨트롤할 클래스를 따로 붙이신다음 (#cb1과 구별하기 위해)

아님 네임으로 셀렉터를 찾아도 좋고요 $('[name="check"]')

                    // 개별 체크박스 선택시
                    $(".user-chk").on("click", ".normal", function() {
                        var is_checked = $('.user-chk:enabled').length == $('.user-chk:checked').length;

                        $("#cb1").prop("checked", is_checked);
                    });

답변에 대한 댓글 1개

2021-06-29 (화) 13:29:40
아.하. 네네... 이런 방법도.. 답변 감사합니다. ㅠ.
채택을 아래분걸 해드렷어서.. 또 채택이 안되네요.

답변을 작성하려면 로그인이 필요합니다.