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>
Top comments (0)