HTML 체크박스가 여러 개인 경우 체크 여부 확인하는 form 예제

체크박스가 여러 개인 경우 하나라도 체크되어 있는지 확인하고 submit 하는 html 예제는 다음과 같습니다.

• form 요소에 onsubmit 속성을 사용하여 폼이 제출될 때 실행할 자바스크립트 함수를 지정합니다1. 예를 들어, onsubmit="return validateForm()"과 같이 사용할 수 있습니다1.
• input 요소에 type 속성을 checkbox로 지정하여 체크박스 요소를 생성합니다2. 체크박스 요소는 name 속성을 사용하여 동일한 그룹으로 묶을 수 있습니다2. 예를 들어, name="hobby[]"와 같이 사용할 수 있습니다2.
• 자바스크립트 함수에서 document.querySelectorAll() 메소드를 사용하여 체크박스 요소의 NodeList를 가져옵니다3. 예를 들어, var checkboxes = document.querySelectorAll(“input[name=‘hobby[]’]”)와 같이 사용할 수 있습니다3.
• NodeList의 forEach() 메소드를 사용하여 각 체크박스 요소에 대해 반복하고, checked 속성을 확인하여 체크된 체크박스가 있는지 검사합니다. 예를 들어, checkboxes.forEach(function(checkbox) { if (checkbox.checked) { checked = true; } })와 같이 사용할 수 있습니다.
• 체크된 체크박스가 없으면 alert() 메소드를 사용하여 경고 메시지를 표시하고, return false를 사용하여 폼 제출을 취소합니다. 예를 들어, if (!checked) { alert(“Please check at least one checkbox.”); return false; }와 같이 사용할 수 있습니다.

예제코드

<!-- html 코드 -->
<form onsubmit="return validateForm()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <p>Hobby:</p>
    <label for="reading"><input type="checkbox" id="reading" name="hobby[]" value="reading" />Reading</label>
    <label for="music"><input type="checkbox" id="music" name="hobby[]" value="music" />Music</label>
    <label for="sports"><input type="checkbox" id="sports" name="hobby[]" value="sports" />Sports</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

<!-- javascript 코드 -->
<script>
  // 폼 제출 전에 체크박스 검사하는 함수
  function validateForm() {
    // 체크박스 요소의 NodeList 가져오기
    var checkboxes = document.querySelectorAll("input[name='hobby[]']");
    // 체크된 체크박스가 있는지 확인하기 위한 변수
    var checked = false;
    // 각 체크박스 요소에 대해 반복하면서 checked 속성 확인
    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        // 체크된 체크박스가 있으면 checked 변수를 true로 변경
        checked = true;
      }
    });
    // 체크된 체크박스가 없으면 경고 메시지 표시하고 폼 제출 취소
    if (!checked) {
      alert("Please check at least one checkbox.");
      return false;
    }
  }
</script>

JQuery 를 사용하는 방식

jquery 코드로도 유사한 예제가 가능합니다.

• jquery 코드를 사용하려면 script 태그 안에 jquery 라이브러리를 불러와야 합니다1. 예를 들어, 와 같이 사용할 수 있습니다1.
• jquery 코드에서는 $(document).ready() 메소드를 사용하여 문서가 로드될 때 실행할 함수를 지정할 수 있습니다2. 예를 들어, $(document).ready(function() { // 코드 });와 같이 사용할 수 있습니다2.
• jquery 코드에서는 $(“input[type=‘checkbox’]”) 선택자를 사용하여 체크박스 요소를 선택할 수 있습니다3. 예를 들어, var checkboxes = $(“input[type=‘checkbox’]”);와 같이 사용할 수 있습니다3.
• jquery 코드에서는 .is(“:checked”) 메소드를 사용하여 체크박스 요소의 checked 상태를 확인할 수 있습니다4. 예를 들어, if (checkboxes.is(“:checked”)) { // 체크된 체크박스가 있으면 } else { // 체크된 체크박스가 없으면 }와 같이 사용할 수 있습니다4.
• jquery 코드에서는 .submit() 메소드를 사용하여 폼을 제출할 수 있습니다. 예를 들어, $(“form”).submit();와 같이 사용할 수 있습니다.

예제코드

<!-- html 코드 -->
<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <p>Hobby:</p>
    <label for="reading"><input type="checkbox" id="reading" name="hobby[]" value="reading" />Reading</label>
    <label for="music"><input type="checkbox" id="music" name="hobby[]" value="music" />Music</label>
    <label for="sports"><input type="checkbox" id="sports" name="hobby[]" value="sports" />Sports</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

<!-- javascript 코드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 문서가 로드될 때 실행할 함수
  $(document).ready(function() {
    // 폼 제출 이벤트에 대한 핸들러
    $("form").on("submit", function(e) {
      // 체크박스 요소 선택
      var checkboxes = $("input[type='checkbox']");
      // 체크된 체크박스가 있는지 확인
      if (checkboxes.is(":checked")) {
        // 체크된 체크박스가 있으면 폼 제출
        $("form").submit();
      } else {
        // 체크된 체크박스가 없으면 경고 메시지 표시하고 폼 제출 취소
        alert("Please check at least one checkbox.");
        e.preventDefault();
      }
    });
  });
</script>

체크박스