jQuery Selectors: Select element with checked attribute

This entry is part 23 of 33 in the series jQuery Selectors

$(‘input: checked)

We use the example $(‘input: checked’) where when a radio button is clicked, the text is highlighted to blue.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        $(function () {
            $('input').on('click', function() {
                $('input + label').css({'color': 'black'});
                $('input:checked + label').css({'color': 'blue'});

<p>Where would you like to go next?</p>

<form method='post'>
    <input type='radio' name='country' value='england' id='england'>
    <label for='england'>England</label>
    <input type='radio' name='country' value='brazil' id='brazil'>
    <label for='brazil'>Brazil</label>
    <input type='radio' name='country' value='malaysia' id='malaysia' checked>
    <label for='malaysia'>Malaysia</label>

Series Navigation<< jQuery Selectors: Sibbling selector ~
jQuery Selectors: Selects elements that are in focus in the form >>

Leave a comment

Leave a Reply