How to Get Selected Radio Button Value in Jquery?

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


selector in the val() method to find the value of the selected radio button.

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