pTutorial

New way to learn Programming

How to get radio button value - jquery

JQuery Radion Button Value On Change

Simple Jquery with bootstrap example to get the value of radio button on change using JQuery with the help of live example.

In this example val() function is used to get the value of checked check box by using HTML form name attribute.

JQuery Radion Button Value

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get the value of radio button</title>
<script src="http://freeonlinecompiler.ptutorial.com/
js/jquery.min.js" type="text/javascript"></script>
<link href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="container-fluid">
<div class="col-sm-4">
<h2>Get Radio Button Value on change</h2>
<h3>Please select your higher qualification.</h3>
<div class="radio" id="l">
<label><input type="radio" class="radio-inline"
 name="qual" value="B.Tech">B.Tech</label> 
</div>
<div class="radio"><label><input type="radio" 
class="radio-inline" name="qual" value="M.Tech">
M.Tech</label></div>
<div class="radio"><label><input type="radio" 
class="radio-inline" name="qual" value="PHD">
PHD</label></div>

<div id="data" class="text-center alert-success"></div>
</div>


</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$(".radio-inline").change(function () {
var radioValue = $("input[name='qual']:checked").val();
if (radioValue) {
$("#data").text(radioValue);
}
else {
$("#data").text("You have not selected anything.")
}
});

});
</script>

</html>                                		

Download

See Also


QUOTES OF THE DAY

We are never deceived we deceive ourselves.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER