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

<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>
    <br>
    <input type='radio' name='country' value='brazil' id='brazil'>
    <label for='brazil'>Brazil</label>
    <br>
    <input type='radio' name='country' value='malaysia' id='malaysia' checked>
    <label for='malaysia'>Malaysia</label>
    <br>
</form>

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

Leave a comment

Leave a Reply