[ Web 관련 ]/jQuery

체크박스 전체 체크

BIZLAB 2022. 5. 10. 12:54

https://devlink.tistory.com/865

 

#1 동의체크

<input type="checkbox" name="agree_all" id="agree_all" onfocus="sel_form_id(this.form);" title="전체동의"> 전체동의
<input type="checkbox" name="agree1" id="agree1" onfocus="sel_form_id(this.form);" title="개인정보 수집 및 이용에 대한 동의"> 개인정보 수집 및 이용에 대한 동의
<input type="checkbox" name="agree2" id="agree2" onfocus="sel_form_id(this.form);" title="마케팅 활용 동의"> 마케팅 활용 동의


<script>
//체크박스 전체 체크
$("#agree_all").click(function() {
	if($("#agree_all").is(":checked")){
		$("input[name=agree1]").prop("checked", true);
		$("input[name=agree2]").prop("checked", true);
	}else {
		$("input[name=agree1]").prop("checked", false);
		$("input[name=agree2]").prop("checked", false);
	}
});

//체크박스 체크
$("input[name=agree1], input[name=agree2]").click(function() {

	if($("#agree1").is(":checked") && $("#agree2").is(":checked")){
		$("#agree_all").prop("checked", true);
	}else{
		$("#agree_all").prop("checked", false);
	}
});
</script>

 

 

#2 일반 체크박스

$(document).ready(function() {
	$("#cbx_chkAll").click(function() {
		if($("#cbx_chkAll").is(":checked")) $("input[name=chk]").prop("checked", true);
		else $("input[name=chk]").prop("checked", false);
	});

	$("input[name=chk]").click(function() {
		var total = $("input[name=chk]").length;
		var checked = $("input[name=chk]:checked").length;

		if(total != checked) $("#cbx_chkAll").prop("checked", false);
		else $("#cbx_chkAll").prop("checked", true); 
	});
});