checked( ) property is used in jQuery to manipulate the elements on the checked event of radio buttons, input buttons and select elements. For working on options of select element we should use selected( ) event.
As shown in example below we changed the text of an element of id "log" depending on the the radio button which was checked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>checked demo</title>
<style>
input, label {
line-height: 1.5em;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("input").on("click",function(){ /* click event of radio button*/
$("#log").html($("input:checked").val() + " is checked")/* inner element get changed depending upon selected radio button*/
});
});
</script>
</html>
0 Comment(s)