How to Get Selected Radio Button Value in JQuery?

By Hardik Savani July 6, 2023 Category : jQuery

Sometime we need to get selected value of radio button on click event or change event in jquery. it is a very small thing but if you then you can easily get selected radio button value by class or id on click event in jquery. we almost need to use radio button for male and female in our form.

i will give you 3 example of getting selected radio button value by class or id with click event or change event in js. we will use "checked" attribute to getting selected radio button value.

Let's see both example for getting select value of radio button in jquery.

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - ItSolutionStuff.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>

Example 2:

<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - ItSolutionStuff.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 3:

Read Also: JQuery Moment Add Minutes to Datetime Example
<!DOCTYPE html>
<html>
<head>
    <title>How to get selected radio button value in Jquery? - ItSolutionStuff.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 it can help you...

Tags :
Previous

How to Download File using Axios Vue JS?
Next

Define Global Variable in Laravel 5.8

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares