본문 바로가기
CLASS/JQUERY

#2 / jquery checkbox

by hingu 2024. 6. 12.
⚡ jquery checkbox - attr 버그발생
<body>
	<label><input type="checkbox" id="all">전체 동의합니다</label><br>
	<label><input type="checkbox" id="ck1">[필수]본인 확인 서비스 약관 동의</label><br>
	<label><input type="checkbox" id="ck2">[필수]통신사 이용 약관 동의</label><br>
	<label><input type="checkbox" id="ck3">[필수]통신사/인증사 개인정보 공유 동의</label><br>
	<label><input type="checkbox" id="ck4">[필수]고유식별 정보처리에 대한 동의</label>
</body>

<script type="text/javascript">
	$(function(){
		var $ck = $("[id^='ck']");
		var $use ="";
		
		$("#all").click(function(){
			console.log($("#ck1").is(":checked"))
			
			if($(this).is(":checked") == true){
				$use = true;			
			}else{
				$use = false;
			}
			
			var f;
			for(f=1; f<$ck.length+1; f++){
				$("#ck"+f).prop("checked",$use)	
			}
			
		})
		
		var count=0;
		$ck.click(function(){
			if($(this).is(":checked") == true){
				count++;
			}else{
				count--;
			}

			if(count >= 4){
				$("#all").prop("checked",true)
			}else{
				$("#all").prop("checked",false)
			}
		})
		
	})
</script>

 

attr

attribute의 약자 / 태그 속성 가져옴

attr 사용시 속성값에 대한 상황을 확인해야만 정확한 핸들링을 할 수 있게된다 / 그냥 코드 소스 속성 수정시 사용

 

prop

property의 약자 / 메모리 상주 관련 속성 / 브라우저의 메모리 영역 파트를 변경

 

=> checkbox 핸들링할 경우는 prop 사용