JQuery with HTML Radio button
From w3cyberlearnings
Contents |
Example 1: Form Radio button TRY-IT
- Allow to select one button at a time.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('input:radio[name="fruit"]').click(function(){
var fruit = $('input:radio[name="fruit"]:checked').val();
alert(fruit);
});
});
</script>
</head>
<body>
<div id="content"></div>
<input type="radio" name="fruit" value="Apple"/>Apple
<input type="radio" name="fruit" value="Banana"/>Banana
<input type="radio" name="fruit" value="Mango"/>Mango
<input type="radio" name="fruit" value="coconut"/>Coconut
<input type="radio" name="fruit" value="pear"/>Pear
<input type="radio" name="fruit" value="graph"/>Graph
</body>
</html>
Get the user selected radio button
var fruit = $('input:radio[name="fruit"]:checked').val();
Set the radio button
- All the index start from 0
$('input:radio[name="fruit"]')[0].checked = true; // apple or first index of radio button
$('input:radio[name="fruit"]')[1].checked = true; // banana
$('input:radio[name="fruit"]')[2].checked = true; // Mango
$('input:radio[name="fruit"]')[3].checked = true; // Coconut
...
Example 2: TRY-IT
- Set radio button default value to Mango when page load
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('input:radio[name="fruit"]')[2].checked = true; // Mango
$('input:radio[name="fruit"]').click(function(){
var fruit = $('input:radio[name="fruit"]:checked').val();
alert(fruit);
});
});
</script>
</head>
<body>
<div id="content"></div>
<input type="radio" name="fruit" value="Apple"/>Apple
<input type="radio" name="fruit" value="Banana"/>Banana
<input type="radio" name="fruit" value="Mango"/>Mango
<input type="radio" name="fruit" value="coconut"/>Coconut
<input type="radio" name="fruit" value="pear"/>Pear
<input type="radio" name="fruit" value="graph"/>Graph
</body>
</html>
Reset or unchecked all radio button
$('input:radio[name="fruit"]').attr('checked',false);
Example 3:TRY-IT
- When load this page, the Pear will be unchecked.
tml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('input:radio[name="fruit"]').attr('checked',false);
$('input:radio[name="fruit"]').click(function(){
var fruit = $('input:radio[name="fruit"]:checked').val();
alert(fruit);
});
});
</script>
</head>
<body>
<div id="content"></div>
<input type="radio" name="fruit" value="Apple"/>Apple
<input type="radio" name="fruit" value="Banana"/>Banana
<input type="radio" name="fruit" value="Mango"/>Mango
<input type="radio" name="fruit" value="coconut"/>Coconut
<input type="radio" name="fruit" value="pear" checked="checked" />Pear
<input type="radio" name="fruit" value="graph"/>Graph
</body>
</html>
Related Links
Jquery and HTML Elements
