체크된 체크박스 value 가져오기
전체선택/해제 하는 jQuery 코드와
개별적으로 선택된 값을 가져오고 가져온 개수가 몇개인지 파악하는 코드다.
prop()는 현재 설정된 속성값과 입력폼의 체크등의 여부를 확인 가능한 매우 유용한 속성이다.
결과로 체크 여부에 따라 boolean 타입의 true, false가 반환된다.
$("input:checkbox[id='ID']").prop("checked");
$("input:checkbox[name='NAME']").prop("checked");
$("input:checkbox[name='class[2]']").prop("checked",true); // 배열 사용시 따옴표를 넣어야 인식되더라.
$("input:checkbox[id='class3']").prop("checked",true);
is() 메소드는 해당하는 요소의 상태에 따라 옳고 그름을 불리언으로 반환한다.
$(this).is(":checked");
if($("input:checkbox[id='ID']").is(":checked") == true){ }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
$("#check_all").click(function(){
var chk = $(this).is(":checked");
if(chk) $(".allchk input").prop('checked', true);
else $(".allchk input").prop('checked', false);
});
$("#submit").click(function(){
var selectedCheck = new Array();
$('.inputchk:checked').each(function() {
selectedCheck.push(this.value);
});
// alert(selectedCheck + '\n개수 : '+selectedCheck.length);
if(selectedCheck.length < 1 ){
alert('최소한 1개 이상 항목을 선택하셔야 합니다');
return false;
}
//document.form.submit();
});
});
</script>
</head>
<body>
<label><input id="check_all" type="checkbox"> <b>전체선택</b></label>
<ul class="allchk">
<label><input class="inputchk" name="class[1]" value="1" type="checkbox">1</label>
<label><input class="inputchk" name="class[2]" value="2" type="checkbox">2</label>
<label><input class="inputchk" name="class[3]" id="class3" value="3" type="checkbox">3</label>
<label><input class="inputchk" name="class[4]" value="4" type="checkbox">4</label>
<label><input class="inputchk" name="class[5]" value="5" type="checkbox">5</label>
</ul>
<button type='submit' class='btn btn-primary' id='submit'>전송</button>
</body>
</html>
|
http://bytutorial.com/blogs/jquery/jquery-get-selected-checkboxes 를 참조하면 된다.
개수만 체크하는 경우에는 이렇게 하면 더 편하다.
var selectedCheck = new Array();
$('.inputchk:checked').each(function() {
selectedCheck.push(this.value);
});
// alert(selectedCheck + '\n개수 : '+selectedCheck.length);
if(selectedCheck.length < 1 ){
alert('최소한 1개 이상 항목을 선택하셔야 합니다');
return false;
} |
전체 갯수 : $("input:checkbox[name='name명']").length;
선택된 갯수 : $("input:checkbox[name='name명']:checked").length; 따라서 위의 것을 간단하게 줄이면 $('.inputchk:checked').length; 가 개수 체크를 하므로 if($('.inputchk:checked').length < 1){ alert('최소한 1개 이상 항목을 선택하셔야 합니다'); return false; }
|
