javascript验证动态复选框

Question

Name and id of checkboxes are appearing dynamically. And we are not sure of number of checkboxes. A map is iterated to generate checkboxes contained in a table. So, each table will have a checkbox with 2-3 options depending on map entries. Javascript should validate that at least one entry of checkbox in a table should be checked.

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

Try this with 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 {
        //...
   }
} 

More easy with jQuery:

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

Answer 2

The following solution should hopefully work in this case.

Let's assume that your JSP generated the following html page

(say two html tables, it can generate any number of tables though for your case):

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

Then on form submit you can call a Validate function which will iterate through all the tables on your page and if it finds a table without any checked checkbox it will return false and simply focus on the first checkbox of the table.

The Validate function will be :

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

Hope it helps!

Working Demo:

http://jsfiddle.net/6cyf4skd/