체크박스 선택갯수 제한 문의드립니다.

체크박스 선택갯수 제한 문의드립니다.

QA

체크박스 선택갯수 제한 문의드립니다.

답변 1

본문

안녕하세요.  추운데 모두 감기조심하세요~
고수님들의 도움이 필요해서 문의드립니다.

 

그누보드 스킨중 온라인상담용 각 항목을 설정할수 있는 게시판을 사용하려하는데...
체크박스부분에  선택갯수 제한을 두려하는데.. 잘 안되네요..

 

사용스킨은 트리플님의 온라인상담 게시판입니다.

 

<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>

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 12
© SIRSOFT
현재 페이지 제일 처음으로