too see if checkboxes have been checked javascript

Question

Hallo

How would I go about in checking whether checkBox has been checked in javascript? I C# it is simple enough

int selected = 0;
        for (int loop = 0; loop < chkMeal.CheckedItems.Count; loop++)
        {
            selected++;
        }
        if (selected > 1)
        {
            MessageBox.Show("only one meal allowed", "Halt", MessageBoxButtons.OK, MessageBoxIcon.Error);
        }

How could I do a simlar thing with javascript?

kind regards Arian

Already answered here: http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery — MoarCodePlz, Jun 20 '11 at 13:43

score 1 · Answer 1 · answered Jun 20 '11 at 13:43

For instance, if you give your checkboxes a class you can do something like this:

var myboxes = document.getElementsByClassName('myboxes');
for (var i=0; i<myboxes.length;i++) {
    if (myboxes[i].checked) {
        alert('Box number '+i+' is checked!');
    }
}

tvanfosson · Answer 2 · 2013-08-15T04:43:49.647

1

Using a little bit of jQuery:

$(function() {
     $('form').submit( function() { 
         if ($('[name="chkMeal"]:checked').length > 1) {
             // show an error
             return false; // cancel submit
         }
     });
});

edited Aug 15 '13 at 04:43

answered Jun 20 '11 at 13:43

tvanfosson

524,688
99
697
795

Not that this wouldn't work, but the OP didn't ask for, or even specify that he was using jQuery. – Scott Jun 20 '11 at 13:46
Ah, downvoters... jQuery *is* javascript. Reinventing the wheel for something simple is plain dumb. – tvanfosson Jun 20 '11 at 13:46
1

@Scottie - If he had specifically said "not using a framework" I wouldn't have answered so. As it is, pointing out the use of a superior tool to someone who may not be familiar with it doesn't seem like it's unhelpful. – tvanfosson Jun 20 '11 at 13:48
1

Just because jQuery is as prolific as it is doesn't mean we can assume it's being used or can be added. What if the OP is working in a CMS and can't add a library? What if there's no library present at all; is adding a 28k+ block of JS just to accomplish one simple task any less dumb than "reinventing the wheel for something simple?" What if the site he's working on is using MooTools, YUI, or Prototype? Again your solution totally works and would be completely valid if jQuery was already present, but if it's not, your answer didn't help solve the problem at all. – Scott Jun 20 '11 at 13:54
I'm going to refer to meta.stackoverflow here and be done with it. http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question – Scott Jun 20 '11 at 14:06
@Scottie - re-read the question. The OP talks about how to do it in C#, server-side. I think it's fairly obvious that he's new to javascript/client-side programming. Your response is sort of like blaming me for suggesting a hammer to someone who wants to know how to pound in nails with a rock. Sure, I could show him how to tie a handle to the rock to get more force, but why when there's already a better tool for the job. – tvanfosson Jun 20 '11 at 14:09
@Scottie - humorous, yes, but not apropos. This particular example clearly falls into the category of things for which jQuery is actually a good choice. – tvanfosson Jun 20 '11 at 14:16
I'd disagree that this is a case where jQuery is needed. There are enough built-in tools to get the job done with a simple for loop. – Jun 21 '11 at 04:17
@Matt - I never said "needed," I said a "good choice." Of course, it's not "needed" -- you could, of course, choose to re-write all the relevant parts and skip it. That would be a "bad choice" in my opinion. – tvanfosson Jun 21 '11 at 11:38
Thanks for the $('[name=chkMeal]:checked') syntax. Just what i needed. – dbrin Aug 14 '13 at 23:08

score 1 · Answer 3 · 2011-06-21T04:20:12.007

Simply put, give your form a unique id attribute. Then, traverse HTMLFormElement.elements and check against HTMLInputElement.checked for a truthy value.

HTML:

<form id="foo" method="post" action="./">
    <input type="checkbox" name="check_a" value="foo" />
    <input type="checkbox" name="check_b" value="bar" />
    <input type="checkbox" name="check_c" value="baz" checked />
</form>

JS:

var foo = document.getElementById("foo"), i = 0, el;
for(i;i<foo.elements.length;i++)
{
    el = foo.elements[i];
    if(el.nodeType === 1 && el.tagName === "INPUT" && el.type === "checkbox")
    {
        //element node, is an input element, is a checkbox
        if(el.checked)
        {
            //checkbox is checked  
        }
    }
    el = null;
}

Bonus reference:

too see if checkboxes have been checked javascript

3 Answers3