[JavaScript 자바스크립트] 회원가입 약관동의

로직 

1) 체크박스 전체 선택

2) 체크박스 전체 해제

3) 체크박스 전체 선택 후 하나만 해제했을 시 전체 선택도 해제

4) 체크박스 개별로 전체 선택 되었을 경우 전체 선택 체크

 

jsp

<div class="form-floating">
    <div class="btn btn-link">
        <input type="checkbox" id="checkAll" name="checkAll"> 
            <label for="checkAll"> 약관 전체 동의하기</label>
    </div>
    <p></p>
    <div class="btn btn-link">
        <input type="checkbox" id="privacyAgreeCheckbox" name="privacyAgreeCheckbox" class="normal">
             <label for="privacyAgreeCheckbox"> [필수] 개인정보 수집 및 이용 동의 </label> 
        <button class="d-inline-block border rounded-pill text-primary px-4 mb-3" onclick="javascript:openWin1()">자세히</button>
    </div>
    <div class="btn btn-link">
        <input type="checkbox" id="dbelleAgreeCheckbox" name="dbelleAgreeCheckbox" class="normal">
             <label for="dbelleAgreeCheckbox"> [필수] dbelleArt, dbelleArt 스토어 이용 악관 </label>
        <button class="d-inline-block border rounded-pill text-primary px-4 mb-3" onclick="javascript:openWin2()">자세히</button>
    </div>


    <div class="btn btn-link">
        <input type="checkbox" id="marketingAgreeCheckbox" name="marketingAgreeCheckbox"  class="normal">
             <label for="marketingAgreeCheckbox"> [선택] 마케팅 활용 및 광고성 정보 수신 동의 </label>
                <button class="d-inline-block border rounded-pill text-primary px-4 mb-3"  onclick="javascript:openWin3()">자세히</button>
    </div>

    <br/>
    <span id="vaildEssential"></span>

</div>

 

JS

1) 체크박스 전체 선택

2) 체크박스 전체 해제

 

♥  $(this).is(":checked") : 체크된 상태면 true 아니면 false를 반환

♥  .is(":checked") : checked 상태를 가져오는 함수

♥  .prop("checked", false); : "ckecked"는 값을 set

$(".form-floating").on("click", "#checkAll", function () {

    var checked = $(this).is(":checked");

    if(checked){
        $(this).parents(".form-floating").find('input').prop("checked", true);
      } else {
        $(this).parents(".form-floating").find('input').prop("checked", false);
      }

});

또는

$(".form-floating").on("click", "#checkAll", function () {

    $(this).parents(".form-floating").find('input').prop("checked", $(this).is(":checked"));
    
});

 

---

 

3) 체크박스 전체 선택 후 하나만 해제했을 시 전체 선택도 해제

4) 체크박스 개별로 전체 선택 되었을 경우 전체 선택 체크

 

♥ each : for문과 같음 (이와 같은 코드의 경우 3개의 항목이 돔)

♥ is_checked = is_checked && $(this).is(":checked"); // 하나라도 false이면 false , 모두 true 일 시 만 true 반환

$(".form-floating").on("click", ".normal", function() {

        var is_checked = true;

        $(".form-floating .normal").each(function() { 

            console.log($(this).is(":checked")); //true,false 확인

            is_checked = is_checked && $(this).is(":checked");
        });

        $("#checkAll").prop("checked", is_checked);

});