Html＆JQuery 체크박스 체크 갯수 제한
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-29 00:40
조회view: 8
본문
체크박스 체크 갯수 제한하기
예제는 class로 지정..
html
<div class="chk_box"><input type="checkbox" name="chk11" id="chk11" value="1" class="selec_chk"><label for="chk11"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk12" id="chk12" value="1" class="selec_chk"><label for="chk12"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk13" id="chk13" value="1" class="selec_chk"><label for="chk13"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk14" id="chk14" value="1" class="selec_chk"><label for="chk14"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk15" id="chk15" value="1" class="selec_chk"><label for="chk15"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk16" id="chk16" value="1" class="selec_chk"><label for="chk16"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk17" id="chk17" value="1" class="selec_chk"><label for="chk17"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk18" id="chk18" value="1" class="selec_chk"><label for="chk18"><span></span>check!!</label></div>
<div class="chk_box"><input type="checkbox" name="chk19" id="chk19" value="1" class="selec_chk"><label for="chk19"><span></span>check!!</label></div>jQuery/Javascript
$(".selec_chk").on("click" , function(){
var chkcnt = $(".selec_chk:checked").length;
if(chkcnt > 3) {
$(this).attr("checked" , false);
alert("선택은 3개까지 가능합니다.");
}
});