[JQuery] 전체 동의 체크박스 처리

1. HTML 구조.

<!-- 모두 동의 -->
<div class="chk">
	<label for="allAgree">모두 동의합니다.</label>
	<input type="checkbox" id="allAgree" />
</div>

<!--동의 1번 -->
<div class="chk>
	<label for="chk1">위 내용에 동의합니다.</label>
    <input type="checkbox" name="agree" id="chk1" />
</div>

<!-- 동의 2번 -->
<div class="chk">
	<label for="chk2">위 내용에 동의합니다.</label>
    <input type="checkbox" name="agree" id="chk2" />
</div>

 

 

 

2.제이쿼리로 체크박스 처리

 

//동의관련 체크박스 변수 선언
let $allAgreeChk = $("#allAgree");
let $agreeChkEl = $("input[name='agree']");

//전체 동의 체크박스 클릭시 동의 관련 체크박스에 체크처리
$allAgreeChk.on("click",function(){
	$(this).parents(".chk").find("input").prop("checked",$(this).is(":checked"));
});

//동의 관련 체크박스 전체 클릭시 전체동의 체크박스 자동체크처리
$agreeChkEl.on("click",function(){
	let isChecked = true;
    $agreeChkEl.each(function(){
    	isChecked = isChecked && $(this).is(":checked");
    });
    
    $allAgreeChk.prop("checked",isChecked);
})