How do I make sure that at least one checkbox is checked?

Question

I am using checkboxes whose values is coming from database. Its name is same but name is fetching like:

<input type="checkbox" id="chkBankServices" name="<%=bs.getServiceID()%>">
<%=bs.getServiceDesc()%>

through this i am getting the values from the database. Now i have to validate that at least one checkbox should be selected..

If any one can help me i shall be thankful to u. If i am giving like this the javascript code:

var services = document.getElementsById( 'chkBankServices' );
if(!(services[0].checked) && 
   !(services[1].checked) && 
   !(services[2].checked) && 
   !(services[3].checked) && 
   !(services[4].checked) && 
   !(services[5].checked) && 
   !(services[6].checked) &&
   !(services[7].checked) && 
   !(services[8].checked))
{ 
    alert( "Please select at least one service to submit." );
    return false;
}

It's not giving any alert message. Is anything wrong in that. Plz help me... Thanks in advance

Answer 1

Have you checked the rendered source to make sure your checkboxes are being given the expected names?

Answer 2

Try this:

var services = document.getElementById( 'chkBankServices' );
var checkboxes = services.getElementsByTagName('input');
var checked = false;
for (var i=0,i0=checkboxes.length;i<i0;i++)
if (checkboxes[i].type.toLowerCase()=="checkbox")
{
    if (checkboxes[i].checked) checked = true;
}

and then:

if (!checked)
{
    alert('Not checked');
    return false;
}

Answer 3

There is no getElementsById method, since there should only be one element with a given id. Perhaps you meant to use getElementsByName? This allows multiple elements to be returned.

As this is really a client side issue, it would help if you could post a sample of the generated HTML, and we can guide you further.

Answer 4

in jQuery :

   alert(  $("#chkBankServices input[type=checkbox]:checked").length > 0 );

Answer 5

I don't know if this will help you with your specific problem, but your code would be easier to read if you avoided the massive if block and used a loop instead:

var checked = false;
for(var i=0;i<services.length;i++){
  if(services[i].checked){
    checked = true;
  }
}
if(!checked){
    alert( "Please select at least one service to submit." );
    return false;
}

Answer 6

Looking at your code, I'm betting you have that checkbox in a repeater of some sort and are creating multiple checkboxes with the same ID which is invalid html. I would wrap it in a div/span or something with an id like below:

 if (!isSomethingChecked()) {
    alert( "Please select at least one service to submit." );
    return false;
 }

  function isSomethingChecked() {
    var parent = document.getElementById("chkBankServices");
    for (var child in parent.childNodes) {
        var node = parent.childNodes[child];
        if (node && node.tagName === "INPUT" && node.checked) {
            return true;
        }
    }
    return false;
 }

I assumed the HTML looks like :

<div id="chkBankServices">
    <input type="checkbox" id="Checkbox1" />
    <input type="checkbox" id="Checkbox2" checked="checked"/>
    <input type="checkbox" id="Checkbox3" checked="checked"/>
    <input type="checkbox" id="Checkbox4" />
    <input type="checkbox" id="Checkbox5" />
    <input type="checkbox" id="Checkbox6" />
    <input type="checkbox" id="Checkbox7" />
</div>