jQuery :checkbox Selector

The jQuery :checkbox selector selects the checkboxes in a form. You have to use the checkboxes to provide the options to your users to select.

You cannot apply the background, and other CSS to the checkbox after you select it. To highlight the checkbox, you have to wrap it and apply the jQuery to the wrapped element. By doing this, you can easily highlight the checkboxes. Below are the syntax and examples you can use to learn the selector.

jQuery :checkbox selector

Syntax of the Selector

The syntax of jQuery :checkbox selector is given below.

Syntax
$(“:checkbox”)

The above selector requires no argument to pass and select the checkbox. To select a specific checkbox, you can use the class name or id of the checkbox to select. Add the class name with a dot(.) or id with a hash(#) before the selector name.

jQuery :checkbox Selector Selects Input Type Checkbox in a Form

To highlight the checkbox, you have to wrap it with a span element and apply a CSS to it using jQuery. This way, you can highlight the checkbox as given in the output of the example given below.

Example

Test it Live

Output



Select Gender
Male
Female

The above example showing the border and the padding to the checkbox. It’s actually the border and padding to the span element. But, it appears to be the checkbox as the highlighted element.

If you have any queries regarding this tutorial post, please comment below.

Also tell me, what other methods you are using with the selector by commenting below.

References