Today, We want to share with you get value of radio button jquery.In this post we will show you jquery set radio buttons checked based on value, hear for how to get selected radio buttons value in javascript we will give you demo and example for implement.In this post, we will learn about radio buttons value in jquery with an example.

How to Get The Value of Selected Radio Button Using jQuery?

Contents

Example 1: index.html
How to get selected radio button value in Jquery?

<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Www.pakainfo.com</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
   
<input type="radio" name="sex" class="sex" value="male"> Male
<input type="radio" name="sex" class="sex" value="female"> Female
<button>Click to redirect</button>
   
<script type="text/javascript">
   
    $("button").click(function(){
        var selValue = $("input[type='radio']:checked").val();
        console.log(selValue);
    });
   
</script>
  
</body>
</html>

Use the jQuery :checked selector

Example 2: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Radio Button Value - www.pakainfo.com</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>

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Www.pakainfo.com</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
   
<input type="radio" name="sex" class="sex" value="male"> Male
<input type="radio" name="sex" class="sex" value="female"> Female
<button>Click to redirect</button>
   
<script type="text/javascript">
   
    $("button").click(function(){
        var selValueByClass = $(".sex:checked").val();
        console.log(selValueByClass);
    });
   
</script>
  
</body>
</html>

Example 4:

<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Www.pakainfo.com</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
   
<input type="radio" name="sex" class="sex" value="male"> Male
<input type="radio" name="sex" class="sex" value="female"> Female
<button>Click to redirect</button>
   
<script type="text/javascript">
   
    $(".sex").change(function(){
        var selValue = $("input[type='radio']:checked").val();
        console.log(selValue);
    });
   
</script>
  
</body>
</html>

I hope you get an idea about how to check radio button is checked or not in jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

How to Get The Value of Selected Radio Button Using jQuery?

Use the jQuery :checked selector

Related posts: