CSS selector for a checked radio button label using JavaScript/jQuery

This post will discuss how to add a CSS selector for a label of a checked radio button or a checked checkbox using JavaScript and jQuery.

To apply a CSS style to a label of a checked radio button or a checked checkbox, you can use the :checked CSS pseudo-class selector with the adjacent sibling combinator (+).

• The :checked CSS pseudo-class selector matches any checked/selected radio button, checkbox, or option element.
• The adjacent sibling combinator takes two selectors that are children of the same parent and matches the second element if it comes immediately after the first element. It is syntax is:
   
  first_element + second_element { style }

1. Radio Button

For a radio button, you can use the input[type="radio"]:checked + label selector, which matches a label that immediately follows a checked input of type radio.

Edit in JSFiddle

2. Check Box

For a checkbox, you can use the input[type="checkbox"]:checked + label selector, which matches with a label that immediately follows a checked input of type checkbox.

Edit in JSFiddle

 
Alternatively, you can use the :checked + label, which matches with labels of both the radio button and a checkbox that is checked.

3. Drop Down

For a dropdown, you can use the option:checked selector, which matches with the option elements that are selected.

Edit in JSFiddle

That’s all about CSS selector for a checked radio button label using JavaScript and Query.