Toggle Jquery UI Checkbox Array

Ok, so the title may not explain what this post is about, but hopefully it covers the basics.

Recently I have been rewriting a website, adding smarted code and classes. One of the new features I have added is Jquery UI. While this in itself is not new, it was new to this project.

One page contained a form with a collection of Checkboxes. They were converted to use the Jquery UI format, as shown in the code below:

Hopefully, you can understand the above, it’s not doing much, basically, it’s part of a PHP loop which is looping through some results and creating a checkbox for each one. $disName is a PHP variable which contains a unique name for each one.

Now, I want a Tick/Untick All button to do the obvious as a nice time-saving feature.

I create a simple checkbox which we call cuSecAll. Now we start by adding an onclick event to the cuSecAll checkbox, and we tell it to call our function toggleSelectAll.

Now we need to go to our javascript function (I’m assuming that you have an external javascript file working here or are able to put the function in your header).

Now we have started our function and the first thing we have done is get the value of the checkbox which we want to replicate in all of our other checkboxes.

The next thing we want to add is the reference to the other checkboxes. Now since in the version I am creating, I have to work with the fact that these checkboxes are variable, so I don’t know beforehand what the IDs or names of these are, as they can change on a daily basis.

To do this we have to set the checkboxes as part of an array. We do this by setting the name of the checkboxes to name="cuSection[]". This way we can set the ID to be unique so that the label can associate with it, but it is now part of a group.

In our function, we want to reference this group, so we set up each loop which is very simple with jQuery.

So now we have our loop, we are going through every checkbox in that array.

It is setting the checkbox value to match the toggle button that called this function. If you run this, you’ll notice that if using jQuery UI, it won't work. Well, it is working, but for some reason, I couldn’t get the button to auto-refresh the display.

If somebody else has a fix for this problem then please let me know, or if I’m doing something wrong with is the more probable answer.

My solution was to update the class on the label, which is the part that deals with the display. As you can see above, I set my label to have a similar ID to the checkbox, so we add the slight modification below which should solve everything.

Now you should have it working. This should be a lot simpler than my code above, but the jQuery UI messed things up for me. If you do have a problem, check that your jQuery UI theme uses the ui-state-active class, or change the 'checked' part to true.

If somebody else has a better way, please let me know and I’ll update my code. Otherwise, if I help just one person, then I’ll be happy.