Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery checked selector

Suggested Videos
Part 8 - jQuery attribute value selector
Part 9 - jQuery case insensitive attribute selector
Part 10 - jQuery input vs :input



In this video we will discuss the jQuery :checked selector.



The :checked selector selects all checked check-boxes or radio buttons. Let us understand this with an example.

Selects all checked radio button elements
$('input[type="radio"]:checked')

Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed.
jQuery checked selector

When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed.
jquery get checked radio button value

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function () {
                var result = $('input[type="radio"]:checked');
                if (result.length > 0) {
                    $('#divResult').html(result.val() + " is checked");
                }
                else {
                    $('#divResult').html("No radio button checked");
                }
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    Gender :
    <input type="radio" name="gender" value="Male">Male
    <input type="radio" name="gender" value="Female">Female
    <br /><br />
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult">
    </div>
</body>
</html>

Selects all checked checkbox elements
$('input[type="checkbox"]:checked')

Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed.
jquery get checked checkboxes values

When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed.
jquery get selected checkboxes values

<html>
<head>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function () {
                var result = $('input[type="checkbox"]:checked');
                if (result.length > 0) {
                    var resultString = result.length + " checkboxe(s) checked<br/>";
                    result.each(function () {
                        resultString += $(this).val() + "<br/>";
                    });
                    $('#divResult').html(resultString);
                }
                else {
                    $('#divResult').html("No checkbox checked");
                }
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    Skills :
    <input type="checkbox" name="skills" value="JavaScript" />JavaScript
    <input type="checkbox" name="skills" value="jQuery" />jQuery
    <input type="checkbox" name="skills" value="C#" />C#
    <input type="checkbox" name="skills" value="VB" />VB
    <br /><br />
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult">
    </div>
</body>
</html>

jQuery tutorial for beginners

2 comments:

  1. How can we get check box selected value using html helper with razor sytax like(@Html.CheckBoxFor(m => m.salesaccountmanager, new { @class = "chkroles" })) using jquery

    ReplyDelete
  2. This is working on vs 2010 mvc4. But in vs 2015 mvc5 without cheching anyone button click it says one checkbox cheched... val on... is it bug in vs 2015???

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.