체크박스의 체크 갯수를 제한하려 합니다.
본문
아래와 같이 시간을 배분하는 체크박스가 있습니다.
총 갯수가 10개입니다.
하고싶은것은 최대 4개까지 선택하게 하려고 합니다.
5개를 골랐을때는 경고창이 뜨게 하려고 합니다.
스크립트를 어떻게 해야 할까요?
고수님들의 답변 부탁드립니다.
감사합니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
