체크박스 다중체크 필수 유효성 폼메일 질문드립니다 채택완료
아래는 폼메일에 적용된 체크박스 입니다
그룹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개
</p>
<p><form></p>
<p> <div>그룹1</div></p>
<p> <div>그룹2</div></p>
<p> <div>그룹3</div></p>
<p></form></p>
<p></p>
<p><script></p>
<p>const form = document.querySelector('form');</p>
<p> </p>
<p>form.addEventListener('submit', (event) => {</p>
<p> // 각 그룹의 체크박스가 선택되었는지 확인</p>
<p> const groups = document.querySelectorAll('div');</p>
<p> for (const group of groups) {</p>
<p> const checkedBoxes = group.querySelectorAll('input[type="checkbox"]:checked');</p>
<p> if (checkedBoxes.length === 0) {</p>
<p> alert('각 그룹에서 최소 하나의 체크박스를 선택하세요.');</p>
<p> event.preventDefault(); // 폼 제출 중단</p>
<p> return;</p>
<p> }</p>
<p> }</p>
<p>});</p>
<p></script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><style>
input[type="checkbox"][name$="\[\]"]:focus {
outline: 0.2em dashed gray;
outline-offset: 0.2em;
}
</style></p>
<p> </p>
<p><script>
function chkMailFrm(f) {
// var checked = document.querySelectorAll('[name="a1[]"]:checked');
// if ( !checked.length ) {
// alert("체크박스 하나 이상 선택해주세요.");
// return false;
// }
// return true;</p>
<p>
let passed = true;</p>
<p> </p>
<p> 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);
});</p>
<p> </p>
<p> 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;
}
}</p>
<p> </p>
<p> if (chkd == false) {
passed = false;
alert(k + ' group need a choice');
arr[0].focus();
break;
}
}</p>
<p> </p>
<p> if (passed == false) {
return false;
}</p>
<p> </p>
<p> return true;
}
</script></p>
<p> </p>
<p><form onsubmit="return chkMailFrm(this)"></p>
<p>그룹1
<input type='checkbox' name='a1[]' value='선택1'>
<input type='checkbox' name='a1[]' value='선택2'>
</p>
<p>그룹2
<input type='checkbox' name='a2[]' value='선택1'>
<input type='checkbox' name='a2[]' value='선택2'>
</p>
<p>그룹3
<input type='checkbox' name='a3[]' value='선택1'>
<input type='checkbox' name='a3[]' value='선택2'></p>
<p>
<button type="submit">submit</button>
</form></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그룹1은 체크가 없으면 체크하라고 검사를 하지만
그룹2, 그룹3은 체크가 없는데도 체크하라고 경고창 안뜨고 바로 전송이 되네요
제가 뭘 놓친건지 어렵 ㅠㅠ