How To Get Radio Button Checked Value In jQuery
In this article, we will see how to get the radio button checked value in jquery. Here, we will learn to get the radio button value using javascript. You can use :checked selector and get the value of radio button.
So, let's see the jquery radio button checked value, how to get the radio button value using jquery, and get the selected radio button value javascript.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To Get Radio Button Checked Value In jQuery - Techsolutionstuff </title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
$(".checkedvalue").text("Selected value: " + radioValue);
}
});
});
</script>
<style>
body{
margin:100px;
}
</style>
</head>
<body>
<h2>How To Get Radio Button Checked Value In jQuery - Techsolutionstuff</h2>
<h4>Please select your gender.</h4>
<p>
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</p>
<p><input type="button" value="Get Value"></p>
<p class="checkedvalue"></p>
</body>
</html>
Output:
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery radio button checked value - Techsolutionstuff</title>
<style>
input, label {
line-height: 1.5em;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>
<script>
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val() + " is checked!" );
});
</script>
</body>
</html>
You might also like :
- Read Also: How To Get Checked And Unchecked Checkbox Value In jQuery
- Read Also: Autotab To Next Input Field JQuery Example
- Read Also: Load More Data in Laravel Using Ajax jQuery
- Read Also: How To Reset Form Using jQuery
