How to Get Selected Radio Button Value in 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...
