A simple jQuery code to get selected radio button value

By | August 8, 2020

If you are creating a web form, where you need your customer to accept your web form’s terms and conditions before submitting the form then, this article is useful for you to get a selected radio button value to validate whether the customer has accepted your terms and conditions or not.

Here are the steps that followed to get selected radio button value in jQuery.

In this example, I have used ‘: checked’ selector that will help me to find a particular field and jQuery ‘val()’ method to get the value of the checked radio button after clicking on the ‘Submit’ button.

Let’s see below example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Get selected radio button value in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $("#clicknow").click(function(){
            var chkVal = $("input[name='termscond']:checked").val();
            if(chkVal){
                alert("Agree with terms and conditions? The answer is " + chkVal);
            }
        });
    });
</script>
</head> 
<body>
    <h4>Agree with terms and conditions?</h4>
    <p> 
        <label><input type="radio" name="termscond" value="Yes">Yes</label> 
        <label><input type="radio" name="termscond" value="No">No</label>
    </p>
    <p><input type="button" id="clicknow" value="Submit"></p>
</body>
</html>

The form will look like:

Get selected radio button value in jQuery

Ouput:

Get selected radio button value in jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *