jQuery :radio Selector

The jQuery :radio selector selects all the input type radio elements in a form. A radio button is used in the form to display options to select. There can be many radio buttons and when you have to highlight a few, you can use this selector.

jQuery :radio Selector

Syntax of the Selector

The syntax of jQuery :radio selector is given below.


The above syntax showing that the radio button selector requires no parameter to pass. If you want to select only the required radio buttons, you can use the class name or id of the element. If there are multiple forms on a page, you can add a class to the form element to select its radio button.

jQuery :radio Selector Selects Input Type Radio Buttons in a Form

If you want to highlight the radio buttons, you have to use the jQuery :radio selector. However, to highlight the radio button, you cannot apply the background color directly to highlight. You have to add a span element to the radio buttons to highlight them. See the example given below to highlight the button.


Test it Live


Select Gender



The above example showing the radio button highlight with background yellow color. It’s actually the span element that contains the background to add to the radio button. However, it appears to be the radio button 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.