Here’s a simple example to toggle Images using Radio Buttons:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Toggle Images using RadioButtons</title>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("input:radio[name=rdImg]").change(function() {
if (this.value == "0") {
$("#imgOne").attr(
'src', 'http://theimagepathcomeshere.jpg'
);
}
else {
$("#imgOne").attr(
'src', 'http://thesecondimagepathcomeshere.jpg'
);
}
});
});
</script>
</head>
<body>
<label><input name="rdImg" type="radio" value="0" />Image 1</label><br />
<label><input name="rdImg" type="radio" value="1" />Image 2</label><br />
<img id="imgOne" />
</body>
</html>
Similarly you can add multiple radio buttons and toggle multiple images with it.
Just use the value of each radiobutton to toggle the right image.
See a Live Demo
Tweet
About The Author
No comments:
Post a Comment