체크박스 선택갯수 제한 문의드립니다.
본문
안녕하세요. 추운데 모두 감기조심하세요~
고수님들의 도움이 필요해서 문의드립니다.
그누보드 스킨중 온라인상담용 각 항목을 설정할수 있는 게시판을 사용하려하는데...
체크박스부분에 선택갯수 제한을 두려하는데.. 잘 안되네요..
사용스킨은 트리플님의 온라인상담 게시판입니다.
<p>
첫번째 3개이상선택불가
<p>
<div class="checkbox"><label><input type="checkbox" name="Ncheck1[0]" id="Ncheck1" value="서울" style="border:0;"> 서울</label></div>
<div class="checkbox"><label><input type="checkbox" name="Ncheck1[1]" id="Ncheck1" value="대전" style="border:0;"> 대전</label></div>
<div class="checkbox"><label><input type="checkbox" name="Ncheck1[2]" id="Ncheck1" value="대구" style="border:0;"> 대구</label></div>
<div class="checkbox"><label><input type="checkbox" name="Ncheck1[3]" id="Ncheck1" value="부산" style="border:0;"> 부산</label></div>
<div class="checkbox"><label><input type="checkbox" name="Ncheck1[4]" id="Ncheck1" value="제주도" style="border:0;"> 제주도</label></div>
<p>
두번째 2개이상선택불가
<p>
<label class="checkbox-inline"><input type="checkbox" name="Ncheck2[0]" id="Ncheck2" value="사과" style="border:0;"> 사과</label>
<label class="checkbox-inline"><input type="checkbox" name="Ncheck2[1]" id="Ncheck2" value="배" style="border:0;"> 배</label>
<label class="checkbox-inline"><input type="checkbox" name="Ncheck2[2]" id="Ncheck2" value="오렌지" style="border:0;"> 오렌지</label>
<label class="checkbox-inline"><input type="checkbox" name="Ncheck2[3]" id="Ncheck2" value="수박" style="border:0;"> 수박</label>
<label class="checkbox-inline"><input type="checkbox" name="Ncheck2[4]" id="Ncheck2" value="포도" style="border:0;"> 포도</label>
<script type="text/javascript">
function Ncheck1(chk)
{
var target = document.getElementsByName('Ncheck1[]');
var num = 0;
var max_count = 3; //3개이상은 안된다
for(var i=0; i < target.length; i++)
{
if(target[i].checked == true)
{num++;}
}
if(num > max_count)
{
chk.checked = false;
return alert(max_count + "개 이상은 체크가 불가능합니다. " );
}
}
</script>
스크립트를 손보면될듯한데... 초보라 넘 어렵네요..
고수님들의 도움말씀부탁드립니다.
답변 1
위처럼 html코드에서 id="Ncheck1" 처럼 id값이 동일하게 만들면 안됩니다
id를 class로 변경한 다음 아래 스크립트로 만드세요
class="Ncheck1" ~~~~
class="Ncheck2" ~~~~
<script>
$(function(){
$('.Ncheck1').click(function(){
nn = $('.Ncheck1:checked').length;
if(nn>3){ $(this).attr('checked', false); alert("3개 이상은 체크가 불가능합니다. " );}
});
$('.Ncheck2').click(function(){
nn = $('.Ncheck2:checked').length;
if(nn>2){ $(this).attr('checked', false); alert("2개 이상은 체크가 불가능합니다. " );}
});
});
</script>