JS syntax for checkbox name attribute with square brackets

Question

This function limits the number of checkboxes selected by the user, but I'm having trouble getting it to work when the name attribute has square brackets (i.e. name=baz[]).

For some reason I can't get this code to work in jsfiddle, but it's based on this tutorial, which has a working demo.

function chkcontrol(j) {
    var total = 0;
    for (var i = 0; i < document.form1.baz.length; i++) {
        if (document.form1.baz[i].checked) {
            total = total + 1;
        }
        if (total > 3) {
            alert("Please select up to three choices")
            document.form1.baz[j].checked = false;
            return false;
        }
    }
}

 <form name="form1">
    <input type=checkbox name="baz[]" value="1" onclick="chkcontrol(0);">Item 1
    <input type=checkbox name="baz[]" value="2" onclick="chkcontrol(1);">Item 2
    <input type=checkbox name="baz[]" value="3" onclick="chkcontrol(2);">Item 3
    <input type=checkbox name="baz[]" value="4" onclick="chkcontrol(3);">Item 4
    <input type=checkbox name="baz[]" value="5" onclick="chkcontrol(4);">Item 5

    <input type=submit value="submit">

</form>

Is JQuery an option for you? Additionally please add quotes around your attribute values and put the semicolon inside the "onclick" attribute. — zachzurn, Mar 13 '13 at 20:26
you don't have valid html there, all attributes in html require you to have quotes around them. — Ryan, Mar 13 '13 at 20:30
Love jQuery :-D (I'm using v. 1.8.2) You're absolutely right, and I just corrected that (I don't always notice mistakes like that when I copy someone else's code, so thanks for pointing that out ;-)) — Chaya Cooper, Mar 13 '13 at 20:31
@ryan they really don't. Especially not html5. If the name has spaces or characters which might mean different things in html versus http versus JS, then there are decisions to be made about how to handle that (renaming is easier)... ...but unless you've got spaces or the like, quoting is optional, and quoting everything will only serve to add visual-uniformity. — Norguard, Mar 13 '13 at 20:34
@Norguard I assume that unless someone tags the question html5 then they are not using it. So if your trying to be compliant with html4.1 strict (and support the browsers that enforce it, IE7 for example, though I know that's an oxymoron to say IE enforces a standard) then they do indeed need quotes. — Ryan, Mar 13 '13 at 20:39
@ryan, most people would be using 4.01 transitional, rather than 4.01 strict, I'd imagine, and even so, that's just going to be a case of running the validator, rather than breaking the layout of the actual page (except for known issues, such as IE refusing to style unknown elements, etc). The majority of the differences in switching to html5, minus APIs and the like, are going to throw errors in validators rather than in document-parsers. Changes like `` actually came about because the parsers did the right thing to begin with. — Norguard, Mar 13 '13 at 20:46
@Norguard - This is actually something I'm curious about. I hadn't realized it, but I've been using HTML5 in most of my documents. Any reason why I should switch back to 4.01 transitional? — Chaya Cooper, Mar 13 '13 at 20:52
Just a few that I can think of: first, your execs or CTO or whomever demand 4.01 validators to pass. Second, you're on a team where the majority of people are inflexible to the changes despite being easier and cleaner. Third, you have templates/CMS that are largely 4.01 and word from the mount is that there's no time to clean them up, so you need to adhere to 4.01 for the internals of the document, to match the ` `, etc... Fourth, guaranteed <=IE5.5 and Netscape Navigator support? I don't know if anybody's tested for quirks in those... — Norguard, Mar 13 '13 at 20:59
I should also add that if you're writing HTML which is not meant to be served through a web-browser, or is not meant to be served as a page in a web-browser (feeding an application, or whatever), then you would need to conform to whatever specifications were laid out when it was decided that HTML was a good idea, over, say XML or JSON... I'm anticipating that this isn't a regular concern, but figured I'd try to be a completionist. — Norguard, Mar 13 '13 at 21:04
That's really helpful :-) That might be why I've had trouble with 1 or 2 programs (such as userCake). For the moment I can probably stick with HTML5, but it sounds like I should probably switch everything to 4.01 as soon as I have the time — Chaya Cooper, Mar 13 '13 at 21:08

score 1 · Accepted Answer · answered Mar 13 '13 at 20:52

Chaya, your issue is actually stemming from the fact that "[]" is part of the name.

While there are provisions to turn forms and their named elements into JS-accessible objects automatically, there are no provisions to understand which elements are intended to be arrays, versus non-arrays, as that's a server-side distinction: ?baz[]=1&baz[]=2.

If you were to ask for form1["baz[]"]; you should get a list of all elements named "baz[]".

From there, if you were to say form1["baz[]"][0]; you should get the first element named "baz[]".

You can, of course, write some parsing magic to automatically find all elements with "[]" in their names and append the "baz" as an array of the form, filled with all elements named "baz[]". And at that point you could do exactly what you were looking to do, before.

Whether or not that's overkill depends on what you're doing.

But simply writing form1["baz[]"][i] in your loop shouldn't be much more time-consuming than what you've currently got.

JS syntax for checkbox name attribute with square brackets

1 Answers1