How To Get Radio Button Checked Value In jQuery
Radio buttons are an essential element in web forms. They are often used to capture user preferences or choices. But have you ever tried to extract the selected value with jQuery? If you're a web developer who is constantly chasing a seamless user experience, you've come to the right place.
Here, we're going to see how to obtain the checked value from radio buttons with jQuery. With this knowledge, you can easily enhance your forms and create dynamic, user-friendly web applications. Let's get going:
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>
Extracting radio button values with jQuery is an important skill for any web developer. With the guidance provided in our blog, you are now able to access and manipulate radio button values, improving the interactivity and user experience of your web applications. Whether you're designing forms, improving user preferences, or building custom interfaces, jQuery simplifies this process.
With this knowledge, you can now create more responsive and engaging web projects. Get started with jQuery and upgrade your web development capabilities.
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
