체크박스 한 개 이상 선택해야 폼 작성 되게끔 하는 방법
본문
안녕하세요 제목 그대로 체크박스 한 개 이상 선택해야 폼 작성이 되게끔 하는 방법이 궁금해서 질문 남깁니다. ㅜㅜ
<form action="" name="form_cp" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="checkbox" id="cp_field1_1" value="1" name="select">
<label for="cp_field1_1">1</label>
<input type="checkbox" id="cp_field1_2" value="2" name="select">
<label for="cp_field1_2">2</label>
<input type="checkbox" id="cp_field1_3 value="3" name="select">
<label for="cp_field1_3">3</label>
<input type="checkbox" id="cp_field1_4" value="4" name="select">
<label for="cp_field1_4">4</label>
<input type="submit">
</form>
몇 시간동안 구글링으로 찾아봤는데 체크 안해도 알람도 안뜨고 그냥 넘어가길래 어떻게 해야 하는지 모르겠어서 질문 남깁니다... 찾아보니까 자바스크립트?제이쿼리 구문이 나오는 것 같은데 잘 몰라서 예제를 봐도 뭘 고쳐야 하는지도 모르겠습니다
1. 체크박스를 하나도 선택하지 않았을 때 알람이 뜨면서 폼 제출이 안 되게끔
2. 아무거나 한 개 이상 선택하면 제출되게끔
2. 중복선택이 가능하게끔(이거는 지금도 되긴 하는데 혹시몰라서
읽어주셔서 감사합니다
답변 2
먼저, 체크박스인데 이름이 같아서 마지막 체크값만 넘어갑니다.
때문에 name="select[]"처럼 배열 지정해줘야 합니다.
* 받는 쪽에선 $_POST['select'] 배열값 사용
id="cp_field1_3" value="3" - 닫기 누락. 제대로 닫히지 않으면 텍스트 클릭해도 체크되지 않겠죠?
<form action="" name="form_cp" method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return check_form(this)">
<input type="checkbox" id="cp_field1_1" value="1" name="select[]">
<label for="cp_field1_1">1</label>
<input type="checkbox" id="cp_field1_2" value="2" name="select[]">
<label for="cp_field1_2">2</label>
<input type="checkbox" id="cp_field1_3" value="3" name="select[]">
<label for="cp_field1_3">3</label>
<input type="checkbox" id="cp_field1_4" value="4" name="select[]">
<label for="cp_field1_4">4</label>
<input type="submit">
</form>
<script>
function check_form(f) {
var checked = document.querySelectorAll('[name="select[]"]:checked');
if ( !checked.length ) {
alert("체크박스 하나 이상 선택해주세요.");
return false;
}
return true;
}
</script>
동일한 함수를 사용해서 그렇습니다. 함수명 다르게 지정하면 됩니다.
<form ... onsubmit="return check_form1(this)">
...</form>
<form ... onsubmit="return check_form2(this)">
...</form>
<script>
function check_form1(f) {
... }
function check_form2(f) {
... }
또는 폼 내 필수값 체크하는 방법도 있긴 합니다만 생략합니다.