[자바스크립트] javascript checkbox(체크박스) 선택된 값 확인, each() 함수

체크박스로 선택된 값을 확인하는 소스 코드입니다.
each() 함수는 선택한 요소가 여러 개 일때 반복하여 함수를 실행합니다.
체크박스 name을 동일하게 지정해 선택된 값을 체크 합니다.

아래 간단한 예제를 참고해 응용하시길 바랍니다!

 

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function fn_chkadd_day(){
	var str = "";
	$("input:checkbox[name='isHday']").each(function(){
		if($(this).prop("checked") == true) {
			str += $(this).val()+", ";
		}
	});
	str += "선택 되었습니다.";
	$("#result").html(str);	
}

</script>
<label class="checkbox-inline">
	<input type="checkbox"  name="isHday" value="월요일" onchange="fn_chkadd_day();">
	<span>월요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox" name="isHday" value="화요일" onchange="fn_chkadd_day();">
	<span>화요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox" name="isHday" value="수요일" onchange="fn_chkadd_day();">
	<span>수요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox"  name="isHday" value="목요일" onchange="fn_chkadd_day();">
	<span>목요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox" name="isHday" value="금요일" onchange="fn_chkadd_day();">
	<span>금요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox"  name="isHday" value="토요일" onchange="fn_chkadd_day();">
	<span>토요일</span>
</label>
<label class="checkbox-inline">
	<input type="checkbox" name="isHday" value="일요일" onchange="fn_chkadd_day();">
	<span>일요일</span>
</label>
<div id="result"></div>

 

월요일 화요일 수요일 목요일 금요일 토요일 일요일