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/

动态复选框的javascript验证

2 个答案: