[jQuery] checkbox 전체 선택/해제 구현하기

1. 기본

 

2. 전체 선택시

 

3. 요소 하나 체크 해제시

 

• 전체코드

<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>

function yoil_chk_change(obj, table_name) {
	$(".day-week").on("click", function() {
		let fl = $(".day-week:checked").length == 7 ? true : false;
		$("input[name='WEEK_ALL']").prop("checked", fl);
	});
	
	var chkbox = false;

	if($(obj).is(":checked") == true) {
		chkbox = true;
	}
	
	$('#'+table_name+' tbody tr').each(function(){
		$(this).find("td").eq(0).find("input:checkbox").prop("checked", chkbox)
	});	
}

</script>


<table id="ScheTable">
<tr>
	<th class="text-center align-middle">요일 선택</th>
	<td class="align-middle">
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_MON" value="Y">월
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_TUE" value="Y">화
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_WED" value="Y">수
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_THU" value="Y">목
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_FRI" value="Y">금
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_SAT" value="Y">토
		<input type="checkbox" class="form-control col-md-6 day-week" name="WEEK_SUN" value="Y">일
		<input type="checkbox" class="form-control col-md-6" name="WEEK_ALL" value="Y" onclick="yoil_chk_change(this, 'ScheTable');">전체선택
	</td>
</tr>
</table>