在JavaScript中触发动态生成的复选框的警报消息中的问题

Question

I am facing issue while doing checkbox validation in my jsp using javascript.

The checkbox generated inside my form, have dynamic ids:

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

In my javaScript, I am trying to do:

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

But I am not getting any alert if I click submit button without selecting any checkbox.

Kindly help as I am new to javascript. Any help will be appreciated.

Answer 1

try modifying your code as below,

 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

You may try this also:

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

Try this

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;

}

And give unique id to your input like

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

if ${lineInstallType} this is not unique then use i with increment in iteration for id.

Answer 4

Here is the most condensed version assuming I understood what you want

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

Alternative for not too old browsers

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