Looping through Checkboxes using Javascript

Question

I tried using JavaScript samples that I found here and other places. The problem is that I am using a Table control working at the server, so the JavaScript I was using does not recognizes the checkboxes which are server side as well. I kept getting the same error message over and over. I got 20 rows with 2 columns each, one for the checkbox and one for a statement that the user has to validate by checking the box before they can submit. The user has to physically check each box. If any checkbox is not checked, then I would like to sees a popup message saying they must check all boxes, Else I am doing a redirect to another page, of course all this on the button click event. This all on Visual Studio 2010, using C#, the back-end is SQL Server.

Here a sample of the JS I was using:

function checkCheckBoxes() {
  if (document.frmTest. CheckBox1.checked == false &&
      document.frmTest. CheckBox2.checked == false &&
      document.frmTest. CheckBox3.checked == false &&
      document.frmTest. CheckBox4.checked == false &&
      document.frmTest. CheckBox5.checked == false &&)
  {
    alert ('You must check all the checkboxes!');
    return false;
  }else{
    return true;
  }
}

then,

<form onsubmit="return checkCheckBoxes();" action="">
<input type="checkbox" name=" CheckBox1" value="1">
<input type="checkbox" name=" CheckBox2" value="2">
<input type="checkbox" name=" CheckBox3" value="3">
<input type="checkbox" name=" CheckBox4" value="4">
<input type="checkbox" name=" CheckBox5" value="5">
<input type="submit" value="Submit!" />
</form>

But I realized that the checkboxes can't be server control but JavaScript controls. Thanks.

Are the checkboxes all separate, or are they generated by a data control, like a Repeater? — mellamokb
– mellamokb, Commented May 18, 2011 at 15:24

Ash Burlaczenko · Accepted Answer · 2012-06-12 15:12:21Z

5

You need something like this

var pass = true;

for (var i = 0; i < form.elements.length; i++ ) 
{
    if (form.elements[i].type == 'checkbox')
    {
        if (form.elements[i].checked == false)
        {
            pass = false;
        }
    }
}

if(!pass)
{
    alert ('You must check all the checkboxes!');
}

return pass;

Hope this helps.

edited Jun 12, 2012 at 15:12

answered May 18, 2011 at 15:26

Ash Burlaczenko

25.6k16 gold badges70 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James · Accepted Answer · 2011-05-18 15:23:49Z

1

You can get the HTML ID of the checkboxes by using the C# ClientID property. Insert that ID into your Javascript, and you will then be able to select the relevant checkboxes and do whatever you like with them.

answered May 18, 2011 at 15:23

James

13.5k1 gold badge19 silver badges19 bronze badges

Comments

Mutt · Accepted Answer · 2011-05-18 15:41:17Z

0

Use querySelectorAll to check for any unchecked check boxes. If there are any, throw the error message, else postback.

function checkCheckboxes(){
   if(document.querySelectorAll('input[type="checkbox"]:not(:checked)').length > 0){
     alert("all checkboxes must be checked");
     return false;
   } else{
     return true;
   }
}

Note: this will only work in Modern browsers Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

answered May 18, 2011 at 15:41

Mutt

9356 silver badges9 bronze badges

Collectives™ on Stack Overflow

Looping through Checkboxes using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related