체크박스 한 개 이상 선택해야 폼 작성 되게끔 하는 방법

체크박스 한 개 이상 선택해야 폼 작성 되게끔 하는 방법

QA

체크박스 한 개 이상 선택해야 폼 작성 되게끔 하는 방법

본문

안녕하세요 제목 그대로 체크박스 한 개 이상 선택해야 폼 작성이 되게끔 하는 방법이 궁금해서 질문 남깁니다. ㅜㅜ

 

 <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>

진짜진짜지짜진짜 진짜 진짜 진짜 감사합니다
복받으세요 진짜감사합니다... name이 같다면 옆에 괄호 넣어야 하는것도 처음 알았습니다......................................진짜감사합니다..........................................................
너무감사해요진짜

제가 궁금한게 하나 있는데 같은 폼 안에 필수로 체크해야하는 체크박스도 있고, 필수가 아닌 체크박스가 함께 있다면..예를들어

<form action="" name="form_cp"  method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return check_form(this)">
        <h1>필수</h1>
        <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>

        <h2>같은 폼, 필수 아님</h2>
        <input type="checkbox" id="cp_field1_1x" value="1" name="select22[]">
        <label for="cp_field1_1x">1</label>
       
        <input type="checkbox" id="cp_field1_2x" value="2" name="select22[]">
        <label for="cp_field1_2x">2</label>
   
        <input type="checkbox" id="cp_field1_3x" value="3" name="select22[]">
        <label for="cp_field1_3x">3</label>
   
        <input type="checkbox" id="cp_field1_4x" value="4" name="select22[]">
        <label for="cp_field1_4x">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>

스크립트에서는 select만 지정하고 select22는 그냥 아무것도 안 쓰고 이렇게 놔두면 되는건가요??
일단 제가 해봤을 때 되긴 하는데 이렇게 하는게 맞는지 궁금해서 질문드립니다

그리고 폼 안에 필수롤 체크되어야 하는 체크박스가 하나 이상 있으면 form태그 안에  onsubmit="return check_form(this)" 이거를 넣고 밑에 스크립트로 네임 지정해주면 된다. 이런 원리인가요??

다시한번감사드립니다 복받으세요 . . .

대상 지정 [name="select[]"]:checked 이라 그렇게 해도 됩니다.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

참고로 아래처럼 줄일 수 있습니다.

        <input type="checkbox" id="cp_field1_1" value="1" name="select[]">
        <label for="cp_field1_1">1</label>

        <label><input type="checkbox" id="cp_field1_1" value="1" name="select[]"> 1</label>

정말 감사합니다
진짜진짜진짜 마지막으로 질문 하나만 더하겠습니다 ..ㅠㅠ

한 페이지에 폼이 두 개가 있고, 각각의 폼에는 필수로 눌러야하는 체크박스가 있습니다

첫 번째 폼의 필수 체크박스를 입력하고 제출을 누르면 첫 번째 폼만 제출되게 하고싶어서
제가 폼 2개 각각에  onsubmit="return check_form(this)" 를 추가하고

<script>
function check_form(f) {
  var checked = document.querySelectorAll('[name="select[] (첫 번째 폼 안에 있는 필수 체크박스 네임)"]:checked');
  if ( !checked.length ) {
    alert("체크박스1-1을 선택해주세요.");
    return false;
  }
  return true;
}
</script>

<script>
function check_form(f) {
  var checked = document.querySelectorAll('[name="select222[] (두 번째 폼 안에 있는 필수 체크박스 네임"]:checked');
  if ( !checked.length ) {
    alert("체크박스 2-1을 선택해주세요.");
    return false;
  }
  return true;
}
</script>

이런식으로 했는데요

두 번째에 있는 폼은 괜찮은데 첫 번째 폼에서 필수 체크박스를 클릭하지 않고 제출을 눌렀을 경우
'체크박스 2-1을 선택해주세요.' 이게 뜨고,

두 번째 필수 체크박스를 클릭했을 시 첫 번째 필수 체크박스를 클릭하지 않아도 첫 번째 폼 안에 있는 제출하기 버튼을 눌렀을 때 제출이 됩니다....ㅜㅜ 혹시 어떻게 하는지 아신다면 알려주실 수 있을까요? 진짜 죄송합니다

동일한 함수를 사용해서 그렇습니다. 함수명 다르게 지정하면 됩니다.

 

<form ... onsubmit="return check_form1(this)">

...</form>

<form ... onsubmit="return check_form2(this)">

...</form>

<script>

function check_form1(f) {

... }

function check_form2(f) {

... }

 

또는 폼 내 필수값 체크하는 방법도 있긴 합니다만 생략합니다.

class 추가해주면 아래처럼 편하게 사용 가능합니다.
경고창 띄우고 편의상 필수 체크박스 첫 항목 포커스입니다. 포커스 시 보기 좋게 테두리 처리.


<style>
input.require:focus { outline: solid 2px red; border-radius: 3px; }
</style>
<form action="" name="form_cp1"  method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return check_form(this)">
<fieldset>
    <legend>폼1</legend>
    <h1>필수</h1>
    <label><input type="checkbox" id="cp_field1_1" value="1" name="select[]" class="require">1</label>
    <label><input type="checkbox" id="cp_field1_2" value="2" name="select[]" class="require">2</label>
    <label><input type="checkbox" id="cp_field1_3" value="3" name="select[]" class="require">3</label>
    <label><input type="checkbox" id="cp_field1_4" value="4" name="select[]" class="require">4</label>
    <h2>선택</h2>
    <label><input type="checkbox" id="cp_field1_1x" value="1" name="select22[]">1</label>
    <label><input type="checkbox" id="cp_field1_2x" value="2" name="select22[]">2</label>
    <label><input type="checkbox" id="cp_field1_3x" value="3" name="select22[]">3</label>
    <label><input type="checkbox" id="cp_field1_4x" value="4" name="select22[]">4</label>
    <input type="submit">
</fieldset>
</form>
<form action="" name="form_cp2"  method="post" enctype="multipart/form-data" autocomplete="off" onsubmit="return check_form(this)">
<fieldset>
    <legend>폼2</legend>
    <h2>선택</h2>
    <label><input type="checkbox" id="cp_field2_1" value="1" name="select[]">1</label>
    <label><input type="checkbox" id="cp_field2_2" value="2" name="select[]">2</label>
    <label><input type="checkbox" id="cp_field2_3" value="3" name="select[]">3</label>
    <label><input type="checkbox" id="cp_field2_4" value="4" name="select[]">4</label>
    <h1>필수</h1>
    <label><input type="checkbox" id="cp_field2_1x" value="1" name="select22[]" class="require">1</label>
    <label><input type="checkbox" id="cp_field2_2x" value="2" name="select22[]" class="require">2</label>
    <label><input type="checkbox" id="cp_field2_3x" value="3" name="select22[]" class="require">3</label>
    <label><input type="checkbox" id="cp_field2_4x" value="4" name="select22[]" class="require">4</label>
    <input type="submit">
</fieldset>
</form>
<script>
function check_form(f) {
  var checked = f.querySelectorAll('input[type=checkbox].require:checked');
  if ( !checked.length ) {
    alert("필수 체크박스를 1개 이상 선택해주세요.");
    var checkbox = f.querySelectorAll('input[type=checkbox].require');
    checkbox[0].focus();
    return false;
  }
  return true;
}
</script>

id는 유일해야 합니다.
name은 동일해도, 폼이 다르니까 괜찮습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 2,087
QA 내용 검색
filter #css ×

회원로그인

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