javascript验证动态复选框

Question

复选框的名称和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>

Answer 1

尝试使用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 {
        //...
   }
} 

使用jQuery更容易：

// onready method...binding
var is_checked = false;
$('input[type="checkbox"]').each(function() {
    if ($(this).is(":checked")) {
        is_checked = true;
    }
});

Answer 2

在这种情况下，以下解决方案应该可以工作。

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

（假设有两个html表，虽然可以根据您的情况生成任何数量的表）：

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

然后在表单提交时，您可以调用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;
     }
 }
}

希望能帮助到你！

工作演示：

http://jsfiddle.net/6cyf4skd/