checked selector in jQuery with example

Home » JQuery » jQuery Selectors » checked selector in jQuery with example

checked selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

checked selector returns all the checked input elements from the group of elements.

Example 1 :

    <html>
    <head>
    <title>checked Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myButton").click(function () {
                var text = "";
                $(":Checked").each(function () {
                    text = text + "   " + $(this).val();
                });
                var spanText = $("#checkedSpan").html();
                if (spanText != null) {
                    $("#checkedSpan").innerHTML = " ";
                }
                $("#checkedSpan").html("You selected: " + text);
            });
        });
    </script>
    </head>
    <body>
    <input type="checkbox" name="BE" value="BE">BE
    <input type="checkbox" name="ME" value="ME">ME
    <input type="checkbox" name="MS" value="MS">MS
    <input type="checkbox" name="MCA" value="MCA">MCA
    <button id="myButton">Click</button>
    <button onclick="location.reload();">Reset</button><br>
    <span id="checkedSpan"></span>
    </body>
    </html>

Demo :

In the above example, we have used checked selector. Checked selector selects all the checked elements from the group of elements. In above example, on button click the selector selects the checked checkboxes and display them.