15-Jan-2020
.
Admin
Hi Dev,
Today, I will learn you how to get selected radio button value in jquery. You can simply use the jQuery :checked
I will give you three example of getting selected radio button value by class with click event in js. You will use "checked" attribute to getting selected radio button value.
Example 1 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-3">
<div class="card mt-5">
<div class="card-header bg-success">
<h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label><strong>Select Your Hobby</strong>:-</label><br>
<label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
<label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
<label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
<label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
</div>
<div class="form-group text-center">
<button class="btn btn-success submit-btn" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.submit-btn').click(function () {
var value = $('.radio-button:checked').val();
alert(value);
});
</script>
</body>
</html>
Example 2 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-3">
<div class="card mt-5">
<div class="card-header bg-success">
<h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label><strong>Select Your Hobby</strong>:-</label><br>
<label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
<label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
<label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
<label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
</div>
<div class="form-group text-center">
<button class="btn btn-success submit-btn" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.submit-btn').click(function () {
var value = $('input[name="hobby"]:checked').val();
alert(value);
});
</script>
</body>
</html>
Example 3 :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-3">
<div class="card mt-5">
<div class="card-header bg-success">
<h4 class="text-white text-center"><strong>Get selected Radio Button Value in JQuery</strong></h4>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label><strong>Select Your Hobby</strong>:-</label><br>
<label><input type="radio" name="hobby" class="radio-button" value="playing">playing</label>
<label><input type="radio" name="hobby" class="radio-button" value="reading">reading</label>
<label><input type="radio" name="hobby" class="radio-button" value="singing">singing</label>
<label><input type="radio" name="hobby" class="radio-button" value="listening">listening</label>
</div>
<div class="form-group text-center">
<button class="btn btn-success submit-btn" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.submit-btn').click(function () {
var value = $('input[type="radio"]:checked').val();
alert(value);
});
</script>
</body>
</html>
It will help you...
#Jquery
#JavaScript