How to get selected radio button value in Jquery?

By Hardik Savani | July 30, 2019 | | 5666 Viewer | 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:

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



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

Tags :

Example jQuery

We are Recommending you: