체크박스를 한 개 이상 선택해야 하는 소스? 채택완료
설문조사? 비슷한 걸 하고 있습니다.
일반적인 raido 버튼 형식은 상관없는데...
다중 체크를 할 수 있는 아래와 같은 경우가 있습니다.
4가지 종류의 과일 중 좋아하는 과일을 선택하는 것인데 다중 체크를 할 수 있습니다.
</p>
<p><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);?>> 참외</p>
<p>
제가 원하는 것은 위의 체크박스에서 하나도 선택하지 않았을 경우 최소 한개 이상 선택하라는 경고창이 나오면서 설문 폼이 제출되지 않는 기능입니다.
구글링과 이곳에서 찾아보니 name=select[] 처럼 배열을 지정해줘야 한다고 하는데...
이곳 Q&A게시판에서 BiHon님이라는 분이 제시해준 소스입니다.
</p>
<pre>
<code><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></code></pre>
<p>
그러나 현재 제가 작성된 소스는 각 체크항목별로 name이 다르게 지정되어 있습니다.
> 사과 > 수박 > 딸기 > 참외
이럴 경우에는 어떻게 하면 체크박스 한 개 이상을 선택해야 폼 작성 되게끔 할 수 있을까요?
답변 2개
저도 며칠전 코딩하다가 똑같은 상황을 맞이 했습니다.
구글신의 도움을 받았네요.
아래 check_me 라는 클래스명은 마음대로 영문, 숫자, _를 혼합하여 바꾸시면 됩니다.
다만 클래스명을 스크립트 안에 빨간색 부분도 똑같이 해야죠.
역시 구글신!!
class="check_me"> 사과 class="check_me"> 수박 class="check_me"> 딸기 class="check_me"> 참외
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
뒷북이네요.ㅜㅠ 여튼 함수를 하나 만들었습니다.
</p>
<p><script>
function trueCheck() {
for (count = 0, i = 1; i <= 4; i++) count += document.getElementsByName("wr_" + i)[0].checked;
if (count == 0) alert("하나이상 필수선택");
}
</script></p>
<p>답변에 대한 댓글 4개
https://codepen.io/sinbi/pen/wvpjKJr
[code]
<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>
[/code]
name 이 같을 경우는 아래처럼 되겠죠.
[code]
<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>
[/code]
[code]
<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>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
덕분에 잘 해결됐네요...^^