How to Get Value From Selected Radio Button in jQuery Full Tutorial For Beginners

How to Get Value From Selected Radio Button in jQuery Full Tutorial For Beginners

 

Welcome friends today in this blog post we will be talking about how to get value from radio button in jquery. All the source code will be shown below

 

 

Get Started

 

 

In order to get started you need to create a index.html file and copy paste the following code to it

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Radio Button Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $("input[type='button']").click(function(){
            var radioValue = $("input[name='gender']:checked").val();
            if(radioValue){
                alert("Your are a - " + radioValue);
            }
        });
    });
</script>
</head> 
<body>
    <h4>Please select your gender.</h4>
    <p> 
        <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label>
    </p>
    <p><input type="button" value="Get Value"></p>
</body>
</html>

 

See also  JavaScript Program to Replace Characters in all Occurences of a String Using replace() & Regular Expression Full Project For Beginners

 

 

Method Used

 

 

In the above code snippet we have used the :checked selector of jquery to get the selected radio button and then in order to get the value of the radio button we have used the val() method

See also  JavaScript Program to Extract Given Property Values from Objects as Array Using map() Method Full Project For Beginners

 

:checked selector to actually get which radio button was selected by the user

 

val() method to get the value of the radio button

 

Leave a Reply