動態複選框的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/