表單驗證-多個復選框

Question

我需要確保如果沒有選中（多個）至少一個復選框，則表單不會提交，這是我目前所擁有的，我認為它應該可以工作：

<script type="text/javascript">
function valthis() {
 var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
 var isChecked = false;
 for (var i = 0; i < checkBoxes.length; i++) {
    if ( checkBoxes[i].checked ) {
        isChecked = true;
    };
    };
    if ( !isChecked ) {

    alert( 'Please, check at least one checkbox!' );
    return false;
    }   
   }

</script>  

我將不勝感激，我可以獲得！

問候，梅森。

Answer 1

這看起來不錯，但是您可以在提交表單之前調用valthis() ，在確認一切正常之后，可以在代碼中“手動”執行此操作。

基本上，這意味着您有一個實際調用valthis的基本按鈕（而不是“提交”按鈕）：

<input type="button" onClick="valthis()" ></input>

然后在valthis()結尾：

document.getElementById("myForm").submit();

Answer 2

您沒有提供有關實際問題的詳細信息，因此無法確切地說出問題所在。

這就是您應該擁有的，無論您實際擁有的是什么。 表單上應該有一個提交偵聽器：

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

表單中應該有一個提交按鈕：

<input type="submit">

要么

<button>Submit</button>

提交偵聽器應返回false以取消提交，或者返回任何其他值以不取消。 該函數應具有更有意義的名稱，例如“ checkCheckboxes”，並且一旦找到選中的復選框，循環就可以返回：

function valthis() {

  var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
  var isChecked = false;

  // Break from loop if isChecked is true
  for (var i = 0; i < checkBoxes.length && !isChecked; i++) {
    isChecked = checkBoxes[i].checked;
  }

  return isChecked;
}

塊后不需要分號，它將表示一個空語句（無害，只是多余的）。

如果可以保證對現代API的支持，則：

<form onsubmit="return this.querySelectorAll('input[type=checkbox]:checked').length > 0;" ...>

會做。