驗證多個復選框

Question

我有一個表格，其中我有很多問題是通過復選框給出的，現在我必須驗證在復選框中包含答案的所有問題中，必須至少選中一個復選框，否則會出現警報消息，我想這樣做一個單一的功能，還想知道我該如何在我的html part.so中調用該功能。

Answer 1

的HTML

<input type="checkbox" name="question[apples]" value="1" id="apples" />
<label for="apples">Do you like apples?</label> 

<input type="checkbox" name="question[shoes]" value="1" id="shoes" />
<label for="shoes">Do you like shoes?</label> 

jQuery的

if ($('#my-form :checkbox:checked').length == 0) {
    alert("You must answer at least one question');
}

jsFiddle 。

PHP（示例服務器端代碼）

if (empty($_POST['question'])) {
  // Go back and pick at least one!
}

Answer 2

您可以按照以下方式對答案選項進行編碼，即在輸入元素中使用相同的名稱表示一組答案。

<label><input type="checkbox" name="Question1" value="Ans1"/>Answer 1</label>
<label><input type="checkbox" name="Question1" value="Ans2"/>Answer 2</label>
<label><input type="checkbox" name="Question1" value="Ans3"/>Answer 3</label>

<label><input type="checkbox" name="Question2" value="Ans1"/>Answer 1</label>
<label><input type="checkbox" name="Question2" value="Ans2"/>Answer 2</label>
<label><input type="checkbox" name="Question2" value="Ans3"/>Answer 3</label>

使用onSubmit事件來調用Java腳本進行驗證，並使用validateAns（如下提供）將問題名稱（此示例中的問題1或Question2）作為參數傳遞。

function validateAns (questionName) {
  var ansInput = document.getElementsByName(questionName);
  var answered = false;
  for (var i = 0; i < ansInputs.length; i++) {
    if (ansInput[i].checked) {
      answered = true;
      break;
    }
  }
  if (!answered) {
    alert('Answer question ' + questionName);
    return false;
  }
  return true;
}

這應該可以解決問題。