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/