체크박스의 체크 갯수를 제한하려 합니다. 채택완료
아래와 같이 시간을 배분하는 체크박스가 있습니다.
총 갯수가 10개입니다.
하고싶은것은 최대 4개까지 선택하게 하려고 합니다.
5개를 골랐을때는 경고창이 뜨게 하려고 합니다.
스크립트를 어떻게 해야 할까요?
고수님들의 답변 부탁드립니다.
감사합니다.
Copy
오전10:00~11:00
오전11:00~12:00
오후1:00~2:00
오후2:00~3:00
오후3:00~4:00
오후4:00~5:00
오후5:00~6:00
오후6:00~7:00
오후7:00~8:00
오후8:00~9:00
답변 2개
채택된 답변
+20 포인트
비버팩토리1년 전
Copy
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;
}
});
}
}
테스트 해보세요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
1년 전
다음 코드가 도움이 될지 모르겠습니다.
Copy
오전10:00~11:00
오전11:00~12:00
오후1:00~2:00
오후2:00~3:00
오후3:00~4:00
오후4:00~5:00
오후5:00~6:00
오후6:00~7:00
오후7:00~8:00
오후8:00~9:00
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);
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인