动态复选框的javascript验证

复选框的名称和id将动态显示。我们不确定复选框的数量。对映射进行迭代以生成表中包含的复选框。因此，每个表都有一个复选框，根据地图条目有2-3个选项。Javascript应该验证表中至少有一个复选框条目应该被选中

HashMap<ServerGroup, ArrayList<String>> serversMap = (HashMap<ServerGroup, ArrayList<String>>) session.getAttribute("userServersMap");
Iterator itr = serversMap.entrySet().iterator();
                while (itr.hasNext()) {
                    Map.Entry<ServerGroup, ArrayList<String>> entry = (Map.Entry<ServerGroup, ArrayList<String>>)itr.next();    
    <table border='1' align="center">
                <tr>
                    <th>Select Server</th>
                    <th>Servers</th>
                </tr>
                <%  
                    for (String server : entry.getValue()) {
                %>
                <tr>
                    <td><input type="checkbox" name="<%= entry.getKey().getName().toString() %>" value="<%=server%>"></td>
                    <td><%=server%></td>
                </tr>
                <%
                    }
                %>
            </table>

HashMap serversMap=（HashMap）session.getAttribute（“userServersMap”）；
迭代器itr=serversMap.entrySet（）.Iterator（）；
while（itr.hasNext（））{
Map.Entry=（Map.Entry）itr.next（）；
选择服务器
服务器

试试JS：

function checkOneCheckbox(){

   var checkboxes=document.getElementsByName("your_checkbox_name"); //all should be same
   var is_checked=false;
   for(var i=0;i<checkboxes.length;i++)
   {
      if(checkboxs[i].checked)
      {
        is_checked=true;
      }
   }

   if(is_checked){
          //at least one is checked;
   }else {
        //...
   }
} 

---

在这种情况下，下面的解决方案有望奏效

让我们假设您的JSP生成了以下html页面

（比如说两个html表，它可以为您的案例生成任意数量的表）：

选择服务器
服务器
测试服务器1
测试服务器2
选择服务器
服务器
测试服务器3
测试服务器4
测试服务器5

然后在表单提交时，您可以调用一个Validate函数，该函数将遍历页面上的所有表，如果它找到一个没有任何复选框的表，它将返回false并只关注表的第一个复选框

验证功能将是：

function Validate()
{
var table = document.getElementsByTagName('table'); // get all the tables on the page



for(var i=0; i<table.length;i++)  //loop through each table
{
    var flag = false;  

    for( var j=1; j<table[i].rows.length;j++) // start checking from 2nd row of the table
    {   

      var currentRow = table[i].rows[j]; 
      var cell = currentRow.cells[0];
      var elem = cell.getElementsByTagName("input");

      if (elem[0].type == "checkbox") 
      {  
        if(elem[0].checked)
        {
         flag=true; 
         break; // stop checking this table as one checked found
        } 
      }

    }

     if(j==table[i].rows.length && flag == false)
     {
       alert("Please select at least one checkbox!");
       table[i].rows[1].cells[0].getElementsByTagName("input")[0].focus();//focus on the first checkbox in the table
       return false;
     }
 }
}

函数验证（）
{
var table=document.getElementsByTagName（'table'）；//获取页面上的所有表
对于（var i=0；我不确定复选框名称，因为它是由映射条目获取的。然后添加一个类并使用
文档获取节点列表。getElementsByClassName
为什么将其设置得如此复杂？
<table border='1' align="center">
  <tr>
  <th>Select Server</th>
  <th>Servers</th>
  </tr>
  <tr>
  <td><input type="checkbox" name="serverX" value="TestServer1"></td>
  <td>TestServer1</td>
  </tr> 
  <tr>
  <td><input type="checkbox" name="serverY" value="TestServer2"></td>
  <td>TestServer2</td>
  </tr>    
</table>

<table border='1' align="center">
  <tr>
  <th>Select Server</th>
  <th>Servers</th>
  </tr>
  <tr>
  <td><input type="checkbox" name="serverM" value="TestServer3"></td>
  <td>TestServer3</td>
  </tr> 
  <tr>
  <td><input type="checkbox" name="serverN" value="TestServer4"></td>
  <td>TestServer4</td>
  </tr> 
   <tr>
  <td><input type="checkbox" name="serverO" value="TestServer5"></td>
  <td>TestServer5</td>
  </tr>   
</table>

function Validate()
{
var table = document.getElementsByTagName('table'); // get all the tables on the page



for(var i=0; i<table.length;i++)  //loop through each table
{
    var flag = false;  

    for( var j=1; j<table[i].rows.length;j++) // start checking from 2nd row of the table
    {   

      var currentRow = table[i].rows[j]; 
      var cell = currentRow.cells[0];
      var elem = cell.getElementsByTagName("input");

      if (elem[0].type == "checkbox") 
      {  
        if(elem[0].checked)
        {
         flag=true; 
         break; // stop checking this table as one checked found
        } 
      }

    }

     if(j==table[i].rows.length && flag == false)
     {
       alert("Please select at least one checkbox!");
       table[i].rows[1].cells[0].getElementsByTagName("input")[0].focus();//focus on the first checkbox in the table
       return false;
     }
 }
}