How To Get Selected Radio Button Value In Jquery?


In this, tutorial we need to get the selected value of the radio button on click event or change event in jquery. it is a very small thing you can easily get the selected radio button value in class or id on click event in the jquery. we almost use a radio button for males and females in our form. 

I will give you many examples of getting selected radio button value by class or id with click event or change event in javascript. we will use the "checked" attribute to getting the selected radio button value.


How To Get Selected Radio Button Value In Jquery? - Step By Step

Let's see many examples for getting the select value of the radio button in jquery.

Example 1:
<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Php Coding Stuff</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></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 getValue = $("input[type='radio']:checked").val();
        console.log(getValue);
    });
   
</script>
  
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Php Coding Stuff</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></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 getValueByClass = $(".sex:checked").val();
        console.log(getValueByClass);
    });
   
</script>
  
</body>
</html>
Example 3:
<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - Php Coding Stuff</title>
    <script src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></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 getValue = $("input[type='radio']:checked").val();
        console.log(getValue);
    });
   
</script>
  
</body>
</html>

I hope it can help you...

Leave a Reply

Your privacy will not be published. Required fields are marked *

We'll share your Website Only Trusted.!!