How do you select the corresponding the corresponding label for an input using jQuery? This is
explained in the following example.
First, create the HTML form with radio buttons
<form method="" id="form">
<label for="radioa">a</label><input type="radio" name="name" class="radioa"/>
<label for="radiob">b</label><input type="radio" name="name" class="radiob"/>
<label for="radioc">c</label><input type="radio" name="name" class="radioc"/>
<label for="radiod">d</label><input type="radio" name="name" class="radiod"/>
</form>
Now the jQuery,
When you hover the mouse pointer over a button, its label field should be animated.
$('input').hover(function(){
To access a particular radio button, use "label[for=' ']". Inside the '' should be the class name
for the radio button.
$("label[for='" + $(this).attr('class') +"']")
attr('class') gives the class-name of the particular attricute.
The hardest part for me to figure out how to put the quotes. It doesn't matter if there is no quotes
for label[for=''] i.e, label[for=radioa] will also work.
Now its just a matter of changing the css properties and adding the callback function.
Here's the full code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').hover(function(){
$("label[for='" + $(this).attr('class') +"']")
.css({color:"blue"})
.css({fontWeight:"bold"});
},function(){
$("label[for='" + $(this).attr('class') +"']")
.css({color:"black"})
.css({fontWeight:"normal"});
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form method="" id="form">
<label for="radioa" class="radioa">a</label><input type="radio" name="name" class="radioa"/>
<label for="radiob" class="radiob">b</label><input type="radio" name="name" class="radiob"/>
<label for="radioc" class="radioc">c</label><input type="radio" name="name" class="radioc"/>
<label for="radiod" class="radiod">d</label><input type="radio" name="name" class="radiod"/>
</body>
</html>
No comments:
Post a Comment