본문 바로가기
Study Hard/HW

[자바스크립트] Form태그 체크박스 3개 이상 체크 못하게하기

by 코플+ 2023. 6. 26.

html source

JS<input type="checkbox" name="n_skil" value="js" checked onclick="f3ck(this)">
Java<input type="checkbox" name="n_skil" value="java" onclick="f3ck(this)">
Oracle<input type="checkbox" name="n_skil" value="oracle"onclick="f3ck(this)">
HTML<input type="checkbox" name="n_skil" value="html" onclick="f3ck(this)">
CSS<input type="checkbox" name="n_skil" value="css" onclick="f3ck(this)">

js source

<script>
  // 체크 박스 맥스 3개 까지만 체크 가능하게
  const maxCnt = 3;
  let curCnt = 1;
  function f3ck(pThis) {
    console.log(pThis.checked);
    if(pThis.checked) {
      curCnt++;
    } else {
      curCnt--;
    }
    if(curCnt == 4) {
      alert("3개이상 체크할 수 없습니다.");
      pThis.checked = false;
      curCnt--;
    }
  }
</script>

댓글