Jquery Radio Button Checked

Jquery Radio Button Checked

When it is required to make radio buttons as a mandatory or required field you can use Jquery for validation of radio button html elements. Below is the code to validate Radio buttons.

Note: If you want user to select only one available option, give same name to all html radio buttons.

For e.g.

<input id="Radio1" name="MyRadioButtons" type="radio" />Master Card
<input id="Radio2" name="MyRadioButtons" type="radio" />Visa Card
<input id="Radio3" name="MyRadioButtons" type="radio" />Debit card
<input id="Radio4" name="MyRadioButtons" type="radio" />PayPal

Have you noticed how I had given same name to all radio button elements? Ok. Let’s see how to make that radio buttons as a mandatory field.

Jquery radio buttons required field validation

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
     $("document").ready(function () {
        $("#SubmitButtonID").click(function(){
            if(!$("input[name='MyRadioButtons']").is(":checked"))
            {
                alert('Options are Required to fill before submit');
                return false;
            }
            return true;
         });     
    });
    </script>

Description

$("input[name='MyRadioButtons']").is(":checked")

Above code returns Boolean value based on user radio button selection. If user selects any of the available option then it returns true.

Complete code snippet

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
   <script type="text/javascript" language="javascript">
     $("document").ready(function () {
        $("#SubmitButtonID").click(function(){
            if(!$("input[name='MyRadioButtons']").is(":checked"))
            {
                alert('Options are Required to fill before submit');
                return false;
            }
            return true;
         });     
    });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
        <span>Select Payment options</span>
            <input id="Radio1" name="MyRadioButtons" type="radio" />Master Card
            <input id="Radio2" name="MyRadioButtons" type="radio" />Visa Card
            <input id="Radio3" name="MyRadioButtons" type="radio" />Debit card
            <input id="Radio4" name="MyRadioButtons" type="radio" />PayPal
            <div>
            <input id="SubmitButtonID" type="submit" value="button" />
            </div>           
        </div>
    </form>
</body>
</html>

Tags:

Jquery Radio Button CheckedLearning JqueryBasics of jqueryJquery button click eventJquery Trim StringJQuery Animate Div Height and WidthJQuery SlideCheckbox Check all GridviewAndroid Button onClickListener ExampleJquery Dropdown Selected ValueJQuery add/remove Class Dynamically

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.