체크박스 다중체크 필수 유효성 폼메일 질문드립니다
본문
아래는 폼메일에 적용된 체크박스 입니다
그룹1
<input type='checkbox' id='a1' name='a1[]' value='선택1'>
<input type='checkbox' id='a1' name='a1[]' value='선택2'>
그룹2
<input type='checkbox' id='a2' name='a2[]' value='선택1'>
<input type='checkbox' id='a2' name='a2[]' value='선택2'>
그룹3
<input type='checkbox' id='a3' name='a3[]' value='선택1'>
<input type='checkbox' id='a3' name='a3[]' value='선택2'>
위 체크박스 각 그룹에서
필수 1개씩 무조건 선택하도록 하고싶는데요
아래는 검색해서 나온 답변중에서 적용해봤는데
그룹1은 잘 되는데
그룹2..그룹3은 어떤식으로 확장해서 추가해야하는지
여러가지방법을 해봐도 잘 안되네요
고수님들 도와주세요!
감사합니다!
-JavaScript-
function chkMailFrm(f) {
var checked = document.querySelectorAll('[name="a1[]"]:checked');
if ( !checked.length ) {
alert("체크박스 하나 이상 선택해주세요.");
return false;
}
return true;
}
답변 2
<form>
<div>그룹1</div>
<div>그룹2</div>
<div>그룹3</div>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
// 각 그룹의 체크박스가 선택되었는지 확인
const groups = document.querySelectorAll('div');
for (const group of groups) {
const checkedBoxes = group.querySelectorAll('input[type="checkbox"]:checked');
if (checkedBoxes.length === 0) {
alert('각 그룹에서 최소 하나의 체크박스를 선택하세요.');
event.preventDefault(); // 폼 제출 중단
return;
}
}
});
</script>
다음 코드가 도움이 될지 모르겠습니다.
<style>
input[type="checkbox"][name$="\[\]"]:focus {
outline: 0.2em dashed gray;
outline-offset: 0.2em;
}
</style>
<script>
function chkMailFrm(f) {
// var checked = document.querySelectorAll('[name="a1[]"]:checked');
// if ( !checked.length ) {
// alert("체크박스 하나 이상 선택해주세요.");
// return false;
// }
// return true;
let passed = true;
const chk_name_map = {};
f.querySelectorAll('input[type="checkbox"][name$="\[\]"]').forEach((el, i) => {
const el_name_prefix = el.name.substring(0, 2);
if (chk_name_map[el_name_prefix] == null) {
chk_name_map[el_name_prefix] = [];
}
chk_name_map[el_name_prefix].push(el);
});
for (const [k, arr] of Object.entries(chk_name_map)) {
let chkd = false;
for (let i = 0, i_len = arr.length; i < i_len; i++) {
if (arr[i].checked == true) {
chkd = true;
break;
}
}
if (chkd == false) {
passed = false;
alert(k + ' group need a choice');
arr[0].focus();
break;
}
}
if (passed == false) {
return false;
}
return true;
}
</script>
<form onsubmit="return chkMailFrm(this)">
그룹1
<input type='checkbox' name='a1[]' value='선택1'>
<input type='checkbox' name='a1[]' value='선택2'>
그룹2
<input type='checkbox' name='a2[]' value='선택1'>
<input type='checkbox' name='a2[]' value='선택2'>
그룹3
<input type='checkbox' name='a3[]' value='선택1'>
<input type='checkbox' name='a3[]' value='선택2'>
<button type="submit">submit</button>
</form>
답변감사합니다! 바로 적용해 봤는데요.
그룹1은 체크가 없으면 체크하라고 검사를 하지만
그룹2, 그룹3은 체크가 없는데도 체크하라고 경고창 안뜨고 바로 전송이 되네요
제가 뭘 놓친건지 어렵 ㅠㅠ