Check all checkboxes with a [] in the name!?

_sh

I have a series of checkboxes on my page called sid[] - I'm using the brackets so as to generate the automatic array in PHP on submission.

I now have a requirement to be able to check/uncheck all checkboxes called sid[] via javascript but can't find a script that isn't broken by the [] in the name!?

Although each checkbox has the same 'name', they each have an individual 'id' (sid1, sid2, sid3), can anyone propose a nice solution that preferably uses the 'name' (as it'll be neater), or alternatively makes use of the unique 'id'?

bradgrafelman

Here's one way...

<html>
<head>
<script type="text/javascript">
<!--
var toggle = true;

function toggleBoxes() {
    var objList = document.getElementsByName('myInput[]')

for(i = 0; i < objList.length; i++)
    objList[i].checked = toggle;

toggle = !toggle;
}
-->
</script>
</head>
<body>
<form>
    <input name="myInput[]" type="checkbox">1<br>
    <input name="myInput[]" type="checkbox">2<br>
    <input name="myInput[]" type="checkbox">3<br>
    <br>
    <input name="mybutton" type="button" onclick="toggleBoxes()" 
            value="Check/Uncheck All!">
</form>
</body>
</html>

_sh

Thanks Brad, you're always so quick to give useful help 😃

Its my mistake for not mentioning but I actually have two sets of checkboxes (SID[] and WTID[]) on the same page, so need to be able to pass the 'name' of each group to a function, but it seemed that specifying the [] within the call to the function broke it when I tried?

bradgrafelman

What's the function look like, and how did you try to call it?

cretaceous

this jquery solution works:

in the html head:
<link to jquery obviously...>
<script type="text/javascript">
jQuery.fn.checkAll = function(name,flag){
var selector = ':checkbox'+(name?'[@name='+name+']':'');
$(selector,this).attr('checked',flag);
}
</script>

on the page:
<input type="button" value="Select all pages" onclick="$('#pdflist').checkAll('', 1);"/>
<input type="button" value="Deselect all" onclick="$('#pdflist').checkAll('', 0);"/>

the sample above selects all the checkboxes on the page that are in the form : id='pdflist'
google the script name and you can add parameters to limit the selection of checkboxes by name etc
(works with square brackets)

edit: dang, beaten to it - must have taken me ten minutes to write that and miss entire conversation!

bradgrafelman

cretaceous wrote:
the sample above selects all the checkboxes on the page that are in the form : id='pdflist'

So in other words it will only select one checkbox, since an ID value must be unique throughout the entire HTML document? :p

_sh

Ok, well I've modified your function to...

		function ToggleCheckBoxes(TheCheckBox) {
			var objList = document.getElementsByName(TheCheckBox)

		for(i = 0; i < objList.length; i++)
			objList[i].checked = toggle;

		toggle = !toggle;
	}

And I'm calling it like this:

<a href="#" onclick="ToggleCheckBoxes(document.getElementsByName('sid[]');">all</a>

It doesn't work, and Chrome reports 'Uncaught SyntaxError: Unexpected token ;'

bradgrafelman

Why are you calling it like that? The function is expecting a string (TheCheckBox) whereas you're attempting to pass it a collection of objects (and I say attempting since you've got a missing ')' in the onclick handler).

_sh

Whoops...its been a long day, thanks for your patience 😃 Ok, so I'm now calling the function like this...

<a href="#" onclick="ToggleCheckBoxes('sid[]');">all</a>

...and Chrome is reporting 'Uncaught ReferenceError: toggle is not defined'.

bradgrafelman

So.. did you not define toggle as I did in my example above?

_sh

bradgrafelman;10982156 wrote:
So.. did you not define toggle as I did in my example above?

Yet another oversight on my part, I thought that perhaps the 'toggle' string that you used within the example function would automatically toggle between the possible states of the element.

So I have amended your function to:

		function ToggleCheckBoxes(TheCheckBox, TheToggle) {
			var objList = document.getElementsByName(TheCheckBox)

		for(i = 0; i < objList.length; i++)
			objList[i].checked = TheToggle;
	}

And I am calling it via:

[<a href="#" onclick="ToggleCheckBoxes('sid[]','checked');">all</a>] [<a href="#" onclick="ToggleCheckBoxes('sid[]','');">none</a>

Interestingly, it takes two clicks on each for it to take effect? Why is that?

cretaceous

the sample above selects all the checkboxes on the page that are in the form : id='pdflist'

So in other words it will only select one checkbox, since an ID value must be unique throughout the entire HTML document?

nope .. selects all checkboxes within a form where (in this case) the form has id=pdflist
note: apparently @ selecter is deprecated in jq

bradgrafelman

@@sh: Try using boolean true and false instead of 'checked' and '' in your links.

@: Oopsie! Apparently I skimmed a bit too quickly over the jQuery calls - my mistake.

_sh

Tried changing it and now they're all switching on, but not off?

[<a href="#" onclick="ToggleCheckBoxes('wtid[]',true);">all</a>]
[<a href="#" onclick="ToggleCheckBoxes('wtid[]','false');">none</a>]

bradgrafelman

That's because you don't have any links that set the second parameter to boolean false (only one that sets it to the string 'false').

_sh

bradgrafelman;10982248 wrote:
That's because you don't have any links that set the second parameter to boolean false (only one that sets it to the string 'false').

I'm a nightmare, sorry, I have corrected that now - but oddly though it still requires a double click to turn them on/off - it doesn't matter how long I leave between each click, it still requires two in both Chrome and IE?

johanafm

From the code I've seen, it really shouldn't require two clicks for on / two clicks for off. Could you repost the code you are using?

_sh

Yep no probs, so here's the function:

		function ToggleCheckBoxes(TheCheckBox, TheToggle) {
			var objList = document.getElementsByName(TheCheckBox)

		for(i = 0; i < objList.length; i++)
			objList[i].checked = TheToggle;
	}

And here's how I'm calling it:

[<a href="#" onclick="ToggleCheckBoxes('sid[]',true);">all</a>]
[<a href="#" onclick="ToggleCheckBoxes('sid[]',false);">none</a>]

bradgrafelman

Can you show us the complete HTML document you're testing all of this with? Also, which browser (and version) are you using?

_sh

bradgrafelman;10982341 wrote:
Can you show us the complete HTML document you're testing all of this with? Also, which browser (and version) are you using?

Ahhh haaaa!! By cutting down the page to the bare essentials, I have found the issue - I have implemented a 'custom form elements' script that skins checkboxes and radio buttons, it is only upon removing this that the single click functions as it should.

Here is the script that I am using:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Is there a work around here, other than removing the custom styling - or perhaps by calling the Toggle function one onmouseover and then again onclick, essentially prompting two calls to the function?

I really appreciate your help guys!