체크박스를 한 개 이상 선택해야 하는 소스?

체크박스를 한 개 이상 선택해야 하는 소스?

QA

체크박스를 한 개 이상 선택해야 하는 소스?

본문

설문조사? 비슷한 걸 하고 있습니다.

일반적인 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>

뒷북이네요.ㅜㅠ 여튼 함수를 하나 만들었습니다.


<script>
function trueCheck() {
    for (count = 0, i = 1; i <= 4; i++) count += document.getElementsByName("wr_" + i)[0].checked;
    if (count == 0) alert("하나이상 필수선택");
}
</script>

질문을 보면 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>

답변을 작성하시기 전에 로그인 해주세요.
전체 226
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT