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);
})
반응형
'퍼블리셔 Note > JAVASCRIPT' 카테고리의 다른 글
[JQuery] 스크롤 페이드 인 앤 아웃 효과2 - 스크립트 작성 (0) | 2022.01.10 |
---|---|
[JQuery] 스크롤 페이드 인 앤 아웃 효과1 - AOS 라이브러리 (0) | 2022.01.07 |
[vanilla JS] select 박스 선택(option) 값 가져오기 (0) | 2021.10.06 |
[vanilla JS]IE11에서 forEach 사용하는 법. (0) | 2021.10.05 |
[vanilla JS] 여러 개의 li요소에 같은 클릭 이벤트 주기 (0) | 2021.09.30 |