动态复选框的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/