체크박스 체크 후 팝업창에 출력되는 내용을 틀리게 하는 방법이 혹시 있을까요?
본문
제가 현재 여러게의 체크박스를 만들고 거기에서 체크되는 갯수에 따라 출력되는 내용이 바뀌는 팝업창을 코드로 넣으려고 하는데요..어떻게 해야할지 감이 안옵니다....
현재 유사한 방식의 홈페이지를 찾았는데
보시고 코드 어떻게 짜면 될지 알려주실 분 계실까요....
회사에서 갑자기 코드를 짜라고 해가지고..ㅜㅜ
아임웹이라는 곳에서 부분 코드위젯에 넣어보려 했는데 힘드네요....
첨부 링크의 중간에 있는 자가진단 표라는 내용입니다...
도와주세요!!
답변 1
초보자를 위한 예제 코드 첨부합니다.
<label><input type="checkbox" name="chk[]" value="1">1</label><br>
<label><input type="checkbox" name="chk[]" value="2">2</label><br>
<label><input type="checkbox" name="chk[]" value="3">3</label><br>
<label><input type="checkbox" name="chk[]" value="4">4</label><br>
<label><input type="checkbox" name="chk[]" value="5">5</label><br>
<label><input type="checkbox" name="chk[]" value="6">6</label><br>
<label><input type="checkbox" name="chk[]" value="7">7</label><br>
<label><input type="checkbox" name="chk[]" value="8">8</label><br>
<label><input type="checkbox" name="chk[]" value="9">9</label><br>
<label><input type="checkbox" name="chk[]" value="10">10</label><br>
<button type="button" id="btn">버튼</button>
<script>
const button = document.querySelector("#btn");
button.addEventListener("click", (event) => {
const cnt = document.querySelectorAll('[name="chk[]"]:checked').length;
if ( cnt<3 ) {
alert("3개 이상 체크해주세요.");
return false;
} else if ( cnt==10 ) {
alert("전부 다 선택했군요!");
} else if ( cnt>5 ) { // 또는 편하게 cnt>=6
alert("6개 이상이군요.");
} else {
alert(cnt+"개 선택!");
}
});
</script>