첵크박스 선택시 갯수 제한 하기

첵크박스 선택시 갯수 제한 하기 updated_at: 2023-03-28 07:42

첵크박스 선택시 갯수 제한 하기

체크박스의 갯수를 확인후 limit 하기

js

function checkCount(index) {
  
  var nMin = 1;
  var nMax = 3;
  var nChecked = 0;
  var c = document.getElementsByClassName('interest');

  for( i = 0, nChecked = 0; i  < c.length; i++) if( c[i].checked) nChecked++

  if( nChecked > nMax) {
    alert( nMax + " 개 까지 선택할 수 있습니다.");
    c[index].checked = false
  }
  if( nChecked  < nMin) {
    alert( "적어도 " + nMin + " 개는 선택하셔야 합니다.")
    c[0].checked = true
  }
}

html

<input type='checkbox' onClick="checkCount(0)" value='컴퓨터/인터넷' class="interest">컴퓨터/인터넷 
<input type='checkbox' onClick="checkCount(1)" value='여행/관광' class="interest" checked>여행/관광 
<input type='checkbox' onClick="checkCount(2)" value='낚시' class="interest" checked>낚시
<input type='checkbox' onClick="checkCount(3)" value='등산' class="interest" >등산 
<input type='checkbox' onClick="checkCount(4)" value='골프' class="interest" >골프 

codePen

See the Pen 책크박스 선택시 갯수 제한 하기 by younghyeong ryu (@wangta69) on CodePen.

평점을 남겨주세요
평점 : 5.0
총 투표수 : 1

질문 및 답글