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.

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...

Example Scratch

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.