체크박스를 한 개 이상 선택해야 하는 소스?
본문
설문조사? 비슷한 걸 하고 있습니다.
일반적인 raido 버튼 형식은 상관없는데...
다중 체크를 할 수 있는 아래와 같은 경우가 있습니다.
4가지 종류의 과일 중 좋아하는 과일을 선택하는 것인데 다중 체크를 할 수 있습니다.
<input type="checkbox" name="wr_1" value="1"<?php echo get_checked('1', $wr_1);?>> 사과
<input type="checkbox" name="wr_2" value="1"<?php echo get_checked('1', $wr_2);?>> 수박
<input type="checkbox" name="wr_3" value="1"<?php echo get_checked('1', $wr_3);?>> 딸기
<input type="checkbox" name="wr_4" value="1"<?php echo get_checked('1', $wr_4);?>> 참외
제가 원하는 것은 위의 체크박스에서 하나도 선택하지 않았을 경우 최소 한개 이상 선택하라는 경고창이 나오면서 설문 폼이 제출되지 않는 기능입니다.
구글링과 이곳에서 찾아보니 name=select[] 처럼 배열을 지정해줘야 한다고 하는데...
이곳 Q&A게시판에서 BiHon님이라는 분이 제시해준 소스입니다.
<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>
그러나 현재 제가 작성된 소스는 각 체크항목별로 name이 다르게 지정되어 있습니다.
<input type="checkbox" name="wr_1" value="1"<?php echo get_checked('1', $wr_1);?>> 사과
<input type="checkbox" name="wr_2" value="1"<?php echo get_checked('1', $wr_2);?>> 수박
<input type="checkbox" name="wr_3" value="1"<?php echo get_checked('1', $wr_3);?>> 딸기
<input type="checkbox" name="wr_4" value="1"<?php echo get_checked('1', $wr_4);?>> 참외
이럴 경우에는 어떻게 하면 체크박스 한 개 이상을 선택해야 폼 작성 되게끔 할 수 있을까요?
답변 2
저도 며칠전 코딩하다가 똑같은 상황을 맞이 했습니다.
구글신의 도움을 받았네요.
아래 check_me 라는 클래스명은 마음대로 영문, 숫자, _를 혼합하여 바꾸시면 됩니다.
다만 클래스명을 스크립트 안에 빨간색 부분도 똑같이 해야죠.
역시 구글신!!
<input type="checkbox" name="wr_1" value="1"<?php echo get_checked('1', $wr_1);?> class="check_me"> 사과
<input type="checkbox" name="wr_2" value="1"<?php echo get_checked('1', $wr_2);?> class="check_me"> 수박
<input type="checkbox" name="wr_3" value="1"<?php echo get_checked('1', $wr_3);?> class="check_me"> 딸기
<input type="checkbox" name="wr_4" value="1"<?php echo get_checked('1', $wr_4);?> class="check_me"> 참외
<script>
입력, 선택한 부분 잘 했는지 확인하는 함수 안에
var js_check_me_t = $(".check_me:checked").length;
if ( !js_check_me_t || js_check_me_t == 0 )
{
alert("[ 과일 ]을 1개 이상 체크해 주세요.");
return false;
}
</script>
감사합니다. PIREE님.
덕분에 잘 해결됐네요...^^
뒷북이네요.ㅜㅠ 여튼 함수를 하나 만들었습니다.
<script>
function trueCheck() {
for (count = 0, i = 1; i <= 4; i++) count += document.getElementsByName("wr_" + i)[0].checked;
if (count == 0) alert("하나이상 필수선택");
}
</script>
비타주리 님, 적어주신 코드에 뭐가 잘못된 게 있는 듯 합니다.
https://codepen.io/sinbi/pen/wvpjKJr
질문을 보면 name 이 모두 다릅니다. 그래서 아래와 같은 경우죠
<label for='mb_1'><input name="mb_1" type="checkbox" value="mb_1" id ="mb_1" required> mb_1</label>
<label for='mb_2'><input name="mb_2" type="checkbox" value="mb_2" id ="mb_2" required> mb_2</label>
<label for='mb_3'><input name="mb_3" type="checkbox" value="mb_3" id ="mb_3" required> mb_3</label>
<label for='mb_4'><input name="mb_4" type="checkbox" value="mb_4" id ="mb_4" required> mb_4</label>
<input type="button" value="클릭" onclick="trueCheck()">
<script>
function trueCheck() {
for (count = 0, i = 1; i <= 4; i++) count += document.getElementsByName("mb_" + i)[0].checked;
if (count == 0) alert("하나이상 필수선택");
}
</script>
name 이 같을 경우는 아래처럼 되겠죠.
<label for='mb_1'><input name="mb" type="checkbox" value="mb_1" id ="mb_1" required> mb_1</label>
<label for='mb_2'><input name="mb" type="checkbox" value="mb_2" id ="mb_2" required> mb_2</label>
<label for='mb_3'><input name="mb" type="checkbox" value="mb_3" id ="mb_3" required> mb_3</label>
<label for='mb_4'><input name="mb" type="checkbox" value="mb_4" id ="mb_4" required> mb_4</label>
<input type="button" value="클릭" onclick="trueCheck()">
<script>
function trueCheck() {
mbN = document.getElementsByName("mb");
for (count = i = 0; i < mbN.length; i++) count += mbN[i].checked;
if (count == 0) alert("하나이상 필수선택");
}
</script>
감사합니다. 덕분에 오늘도 한 단계 성장한 느낌입니다.
다시 보니 for of 처리가 더 편할 듯요.
<label for='mb_1'><input name="mb" type="checkbox" value="mb_1" id ="mb_1" required> mb_1</label>
<label for='mb_2'><input name="mb" type="checkbox" value="mb_2" id ="mb_2" required> mb_2</label>
<label for='mb_3'><input name="mb" type="checkbox" value="mb_3" id ="mb_3" required> mb_3</label>
<label for='mb_4'><input name="mb" type="checkbox" value="mb_4" id ="mb_4" required> mb_4</label>
<input type="button" value="클릭" onclick="trueCheck()">
<script>
function trueCheck() {
count = 0;
for (i of document.getElementsByName("mb")) count += i.checked;
if (count == 0) alert("하나이상 필수선택");
}
</script>
