在JavaScript中觸發動態生成的復選框的警報消息中的問題

Question

我在使用JavaScript在jsp中進行復選框驗證時遇到問題。

我的表單內部生成的復選框具有動態ID：

<form action="displayInstallType" method="get" onsubmit="return checkbox()">
<c:forEach var="lineInstallType" items="${InstallTypeList.listOfInstallType}">
    <input type="checkbox" name="${lineInstallType}" value="${lineInstallType}"                                                class="InstallType"/> ${lineInstallType}
</c:forEach>
</form>

在我的javaScript中，我正在嘗試執行以下操作：

  function checkbox() {
    var InstallTypeChecked=0; 
    var list=document.getElementsByClassName("InstallType");
    for(var i = 0; i < list.length; i++){
        var elem = document.getElementById(list[i].id);
        if(elem!=null){
            InstallTypeChecked=1;
        }
    }
    if (InstallTypeChecked == 0 ) {
        alert('One or more radio buttons/checkboxes are not selected.Please select them first.');
        return false;
    } else {
        return true;
    }
}

但是，如果我單擊提交按鈕而不選擇任何復選框，則不會收到任何警報。

請幫忙，因為我是javascript新手。 任何幫助將不勝感激。

Answer 1

嘗試如下修改您的代碼，

 function checkbox() {
                var InstallTypeChecked=0; 
                var list=document.getElementsByClassName("InstallType");
                for(var i = 0; i < list.length; i++){
                    if(list[i].checked){
                        InstallTypeChecked=1;
                    }
                }
                if (InstallTypeChecked == 0 ) {
                    alert('One or more radio buttons/checkboxes are not selected.Please select them first.');
                    return false;
                } else {
                    return true;
                }
            }

Answer 2

您也可以嘗試以下操作：

function checkbox()
{
    var InstallTypeChecked = 0;
    var list = document.getElementsByClassName("InstallType");
    for(var i = 0; i < list.length; i++)
    {
        if(list[i].checked)
        {
            InstallTypeChecked = 1;
            break;
        }
    }
    if(InstallTypeChecked == 0)
    {
        alert('One or more radio buttons/checkboxes are not selected.Please select them first.');
        return false;
    }
    return true;
}

Answer 3

嘗試這個

function checkbox() {        
    var list=document.getElementsByClassName("InstallType");

    for(var i = 0; i < list.length; i++){
        if(list[i].checked){
            return true;
        }
    }
        alert('One or more radio buttons/checkboxes are not selected.Please select             
        return false;

}

並給您的輸入唯一的ID，例如

<input id="${lineInstallType}" type="checkbox" name="${lineInstallType}" value="${lineInstallType}" class="InstallType"/> 

如果$ {lineInstallType}不是唯一的，則將i與ID一起在迭代中遞增。

Answer 4

假設我了解您想要的內容，這是最簡潔的版本

function checkbox() {
  var list = document.getElementsByClassName("InstallType");
  for(var i = 0; i < list.length; i++) {
    if(list[i].checked) return true;
  }
  alert('One or more radio buttons/checkboxes are not selected.Please select them first.');
  return false;
}

對於不太舊的瀏覽器的替代

function checkbox() {
  if (document.querySelectorAll('option:checked').length==0) {
   alert('One or more radio buttons/checkboxes are not selected.Please select them first.');
   return false;
  }
  return true;
}