Selecting All CheckBoxes With jQuery

In this post we will see how to perform some basic to intermediate level actions on the elements that are selected by your jQuery selectors. If you are new to jQuery, please referent to my previous post on Understanding jQuery. Also to get started look at this post explaining three basic jQuery selectors [ID,Class,Element].

In this blog post we will perform following actions on selected DOM elements.

• Check/Uncheck All CheckBoxes
• Show/Hide All Paragraphs
• Toggle and slideToggle Actions

For our examples we will be working with the sample created at the jsFiddle web site. Following is the link to the public fiddle implementing all the samples we are discussing as part of this blog.

---

Check/UnCheck All CheckBoxes using jQuery

Let's say we have a form where with multiple check boxes and, instead of user selecting all options one by one we want to give an option to select all the options with a single click. following is how we can do this.

The steps would be,

• We want to select all the CheckBoxes (Using Element Selector)
• Loop through them using the .each jQuery helper function
• Check if the Checked property is set to True or not
• If not, let's set that to one using .css action of jQuery

And of course, we will have reverse the If Condition if we want to Deselect all the CheckBoxes.

Check/UnCheck CheckBox with specific Value

Above is good if we want to do a generalize select/deselect of all the checkboxes available in the group but what if I want to select/deselect a checkbox with a specific value ? For example in above example, what if I want to just select/deselect a checkbox whose value is "blue" ?

And the steps here would be,

• Select input whose type is CheckBox
• And which has the value attribute set to the value you want(blue in our example)

Show/Hide All Paragraphs

Let's say you have an element on the page that you want to show/hide when certain button is clicked on the DOM. This can be implemented using show() and hide() action API from jQuery. In our example we will try to show/hide a paragraph when a specific button is clicked.

And the steps would be,

• On Hide button's click event, select the p element and call hide() action
• On Show button's click event, select the p element and call show() action

Now, this is all good but sometimes giving two buttons for controlling the visibility of the same element is not considered a good UX practice. So in order to have one button instead of two we need to conditionally call hide(),show() based on the current state of the element. Of course you can do this but jQuery gives you another great Action called Toggle.

This is basically a wrapper with the condition defined in it to check for current state of the control and call either hide() or show().

jQuery also provides a set of Animation actions that can greatly improve user experience when your page is doing lot of show/hide/re size types of operations on the DOM elements. Usually show /hide operations provide a sudden feedback and that is not very pleasant experience to the user. Instead we can use the animation actions provided by jQuery.

For example, instead of using just toggle() API, we can use a slightly different action called slideToggle and the user experience will be greatly improved.

Following GIFs shows visual difference between two actions.

Toggle

slideToggle

Following is the jsFiddle example of the same.

---