📝 jQuery
🖥️ 1. $.each() 함수
HTML 요소를 원소로 갖는 배열에 대한 반복 처리를 수행하는 경우 배열의 각 원소에 대한
index 값을 사용하여 원소에 접근해야 한다.for( let i = 0; i < el.length; i++ ){ let value = $(el[i]).val(); }
$.each() 함수는 HTML 요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달한다.$.each(el, function(index, item){ // index : 배열의 위치 // item : 배열의 각 원소 let value = $(item).val(); });
📝 예제
EX)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="myform">
<label>
<input type="checkbox" class="hobby" value="soccor"/>축구
</label>
<label>
<input type="checkbox" class="hobby" value="basketball"/>농구
</label>
<label>
<input type="checkbox" class="hobby" value="baseball"/>야구
</label>
<button type="submit">입력값 확인</button>
<hr/>
<div id="result"></div>
</form>
<script>
$('#myform').submit(function(e){
e.preventDefault();
// 선택된 항목을 가지고 온다.
let check_list = $(".hobby:checked");
if( check_list.length == 0 ){
alert("선택된 항목이 없습니다.");
return false;
}
// each
$.each(check_list, function(index, item){
let value = $(item).val();
$("#result").append("<div>" + value + "</div>");
});
});
</script>
</body>