jQuery 10

약관 동의 기능 구현 

전체동의를 체크하면 모든 항목의 체크박스가 체크되고 

모든 항목중 1개만 체크해제하면 전체동의가 체크해제된다.

html코드 1

 

html코드 2

jQuery - 전체동의를 클릭했을 때 아래 체크박스 항목이 모두 체크되기  // 항목 중 1개라도 체크해제되면 전체동의 체크해제

코드 분석

항목을 ul태그로 묶고 li 태그에 항목 내용을 넣음.

각 항목의 체크박스와 텍스트데이터는 input으로 , (필수 or 선택)같은 텍스트는 span 태그를 사용했다.

(내용보기 or 약관 전체보기)는 a태그를 사용했다. a태그의 href속성은 "#"으로 설정해서 이동이 되지 않게 했다.  

전체동의와 각 항목의 클래스명이 같으면로 if() 조건문으로 각 항목의 클래스명이 전체동의인지 아닌지 판단한다.

jQuery객체명.is(":checked"); -> 객체가 체크된 상태인지 확인

jQuery객체명.prop('checked', true) -> 객체가 체크되게 설정한다.

jQuery객체명.prop('checked', false) -> 객체가 체크해제 상태가 되도록 설정한다.

 

내 코드

html 코드

 

jQuery 코드

※ 체크박스의 체크여부 확인을 못해서 헤맸다 -> 체크여부 확인할 때 jQuery객체명.is(':checked') === (true  or  false)로 판단하기

체크박스를 체크하거나 체크해제할 때 jQuery객체명.prop("checked", (true  or  false))

 

체크박스에 동그란 체크박스 이미지 넣을 때