깜놀하는 해므찌로

JavaScript checkbox 자바스크립트 체크박스 본문

IT

JavaScript checkbox 자바스크립트 체크박스

agnusdei1207 2022. 7. 4. 17:06
반응형
SMALL
$(function(){       
	/* 체크 박스 */
	for(var i = 0; i < checked.length; i++){   
		var id = checked[i].split("&")[0];     
		$("#" + id).prop("checked", true); 
	}          
	fncCheckLength(); 
	return false;     
})           
        
<%-- 전체 체크 --%>  
function fncAllCheck(obj){      
	/* 체크 상태 확인 */
	if(obj["checked"]){
		$(".checkbox").each(function(){ 
			if($("#" + this.id).prop("checked")){  
				checked.splice(checked.indexOf(this.value), 1); // 중복 제거 
			}   
			$("#" + this.id).prop("checked", true);
			checked.push(this.value);   
		});       
	}else if(!obj["checked"]){
		$(".checkbox").each(function(){       
			$("#" + this.id).prop("checked",false);  
			checked.splice(checked.indexOf(this.value), 1); // 중복 제거
		});    
	}   
	fncCheckLength();
	return false;
} 
 
<%-- 개별 체크 --%> 
function fncOneCheck(obj){
	/* 체크 상태 확인 */
	if(obj["checked"]){
		checked.push(obj.value);
	}else{         
		$("#" + obj.id).prop("checked", false);
		checked.splice(checked.indexOf(obj.value), 1); // 중복 제거
	}
	fncCheckLength();
	return false;  
}  
  
<%-- 체크 상태 길이 체크 --%>    
function fncCheckLength(){
	var total = $(".checkbox").length;
	var check = $(".checkbox:checked").length;
	
	if(total==check){
		$("#all_check").prop("checked", true);
	}else{   
		$("#all_check").prop("checked", false);
	}
	return false;
}

1. 체크박스 설계에서 가장 중요한 부분은 기능의 분할이라고 생각해요.

2. 개별 체크박스 함수 

3. 전체 체크박스 함수

4. 체크 상태에 따라 길이를 설정해주는 함수

5. 페이지가 로드될 때 체크가 됐었던 값을 읽고 체크박스를 체크해주는 함수

반응형
LIST