체크박스의 체크 갯수를 제한하려 합니다.

체크박스의 체크 갯수를 제한하려 합니다.

QA

체크박스의 체크 갯수를 제한하려 합니다.

본문

아래와 같이 시간을 배분하는 체크박스가 있습니다.

총 갯수가 10개입니다.

하고싶은것은 최대 4개까지 선택하게 하려고 합니다.
5개를 골랐을때는 경고창이 뜨게 하려고 합니다.

스크립트를 어떻게 해야 할까요?

고수님들의 답변 부탁드립니다.

감사합니다.

 

3034902428_1721800346.9989.jpg


 
    <input type='checkbox' name='d_time1'   value='a1'  > 오전10:00~11:00
                <input type='checkbox' name='d_time2'   value='a2'  > 오전11:00~12:00
                <input type='checkbox' name='d_time3'   value='a3'  > 오후1:00~2:00
                <input type='checkbox' name='d_time4'   value='a4'  > 오후2:00~3:00
                <input type='checkbox' name='d_time5'   value='a5'  > 오후3:00~4:00
                <input type='checkbox' name='d_time6'   value='a6'  > 오후4:00~5:00
                <input type='checkbox' name='d_time7'   value='a7'  > 오후5:00~6:00
                <input type='checkbox' name='d_time8'   value='a8'  > 오후6:00~7:00
                <input type='checkbox' name='d_time9'   value='a9'  > 오후7:00~8:00
                <input type='checkbox' name='d_time10'   value='a10'  > 오후8:00~9:00

이 질문에 댓글 쓰기 :

답변 2


<script>
    window.onload = function() {
        var checkboxes = document.querySelectorAll("input[type='checkbox']");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].addEventListener('change', function() {
                var checkedCount = document.querySelectorAll("input[type='checkbox']:checked").length;
                if (checkedCount > 4) {
                    alert("최대 4개까지만 선택할 수 있습니다.");
                    this.checked = false;
                }
            });
        }
    }
</script>

 

테스트 해보세요

다음 코드가 도움이 될지 모르겠습니다.

 

 
    <input type='checkbox' name='d_time1'   value='a1'  > 오전10:00~11:00
                <input type='checkbox' name='d_time2'   value='a2'  > 오전11:00~12:00
                <input type='checkbox' name='d_time3'   value='a3'  > 오후1:00~2:00
                <input type='checkbox' name='d_time4'   value='a4'  > 오후2:00~3:00
                <input type='checkbox' name='d_time5'   value='a5'  > 오후3:00~4:00
                <input type='checkbox' name='d_time6'   value='a6'  > 오후4:00~5:00
                <input type='checkbox' name='d_time7'   value='a7'  > 오후5:00~6:00
                <input type='checkbox' name='d_time8'   value='a8'  > 오후6:00~7:00
                <input type='checkbox' name='d_time9'   value='a9'  > 오후7:00~8:00
                <input type='checkbox' name='d_time10'   value='a10'  > 오후8:00~9:00
<script>
const chk_limit = 4;
let chks = document.querySelectorAll('input[type="checkbox"][name^="d_time"]');
function fn_chks_click(evt) {
    let chkd = 0;
    chks.forEach((el, i) => {
        if (el.checked == true) {
            chkd++;
        }
    });
    if (chkd > chk_limit) {
        alert(chkd + ' > ' + chk_limit);
    }
}
chks.forEach((el, i) => {
    el.addEventListener('click', fn_chks_click);
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 2

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT