[Javascript] All Checkbox

자주 쓰이는 체크박스 코드를 샘플로 만들었다.

1. "모두 체크"에 체크되면 checkbox_name이 모두 체크된다.
2. 모두 체크된 상태에서 하나 이상 checkbox_name이 체크해제되면 "모두 체크"도 체크 해체된다.
3. Svae 버튼을 눌러 Change event가 일어난 것만 저장한다. (단, "모두 체크"를 눌렀을 시 모든 체크박스를 저장한다.)

 

<div>
	<div>
		<p><input type="checkbox" id="allcheck"> <label>모두체크</label></p>
		<hr>
        <p><input type="checkbox" name="checkbox_name"> <label>Checkbox 1</label></p>
        <p><input type="checkbox" name="checkbox_name"> <label>Checkbox 2</label></p>
        <p><input type="checkbox" name="checkbox_name"> <label>Checkbox 3</label></p>
        <p><input type="checkbox" name="checkbox_name"> <label>Checkbox 4</label></p>
	</div>
	<div>
		<button type="button" name="submit_button" onclick="checkSave()">Save</button>
	</div>
</div>

 

 

 

 

<script type="text/javascript">
		// 모든 체크박스 개수
		const AllChecked = $("[name=checkbox_name]").length;
		let CheckedObj = new Object();
		// 초기화면 체크된 개수
		let checkedCnt = $('[name=checkbox_name]:checked').length;
		// init page - 초기화면 진입시 모두 체크 되어 있으면 #allcheck 체크
		if(AllChecked == checkedCnt){
			$("#allcheck").prop("checked", true);
		}	
		

		// 전체 체크박스 체크 후 한개 이상 체크 해제 시 전체 체크박스 체크해제 
		$("[type=checkbox]").change(function(){
			// checked event 발생한 개수
			checkedCnt = $('[name=checkbox_name]:checked').length;
			// 모든 체크박스 개수 와 같으면 allcheck 체크
			if(AllChecked == checkedCnt){
				$("#allcheck").prop("checked", true);
			}else{
				$("#allcheck").prop("checked", false);
			}
			// change event 발행한 list 변수에 담는다. (#allcheck chaenge event는제외)
			if(this.id != 'allcheck'){
				CheckedObj[this.value] = $(this).is(':checked');
			}
		});
		
		// selectAll
		function selectAll(this){
			const checkboxes = document.getElementsByName('checkbox_name');
			// console.log(this.checked);
			checkboxes.forEach((_this) => {
				// #allcheck의 check값 과 동일하게 변경 
				_this.checked = this.checked; 
				CheckedObj[_this.value] = selectAll.checked; 
			})
		}
		
		// 적용 버튼 누를 시 Change event 발생한 리스트만 Update
		function checkSave(){
			// Object가 비어 있으면 알림 메시지 (변경된 사항 없이 적용버튼 눌렀을 때)
			if(Object.keys(CheckedObj).length === 0) {
				alert("Warning!");
			}else{
				$.ajax({
					type: 'POST',
					url: 'anysite.php?pid='+pid,
					data: {"CheckedObj":CheckedObj},
					success: function(result){
						alert("Saved!");
					},
					error : function(result, status, error) {
						alert("Error!");
					}
				});
			}
		}
	</script>