Menu
I want to be able to dynamically change what divs are show using radio button and jQuery - HTML:
<div id="myRadioGroup">
2 Cars<input type="radio" name="cars" checked="checked" value="2" />
3 Cars<input type="radio" name="cars" value="3" />
<div id="twoCarDiv">
2 Cars Selected
</div>
<div id="threeCarDiv">
3 Cars
</div>
</div>
and the jQuery:
<script>
$(document).ready(function(){
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
This does nothing , the divs always show. Im sure this is simple, but Im poor at jQuery .
664
You could just simply add a style declaration to your div you want to show, then just hook that up to your state object.
You're on the right track, but you forgot two things:
desc classes to your description divsinput but text for the id.I have fixed the above and also added a line to initially hide() the third description div.
Check it out in action - http://jsfiddle.net/VgAgu/3/
<div id="myRadioGroup">
2 Cars<input type="radio" name="cars" checked="checked" value="2" />
3 Cars<input type="radio" name="cars" value="3" />
<div id="Cars2" class="desc">
2 Cars Selected
</div>
<div id="Cars3" class="desc" style="display: none;">
3 Cars
</div>
</div>
$(document).ready(function() {
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
You were pretty close. You're description div tags didn't have the .desc class defined. For your scenario you should have the radio button value equal to the div that you're trying to show.
HTML
<div id="myRadioGroup">
2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv" />
3 Cars<input type="radio" name="cars" value="threeCarDiv" />
<div id="twoCarDiv" class="desc">
2 Cars Selected
</div>
<div id="threeCarDiv" class="desc">
3 Cars Selected
</div>
</div>
jQuery
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
working example: http://jsfiddle.net/hunter/tcDtr/
23
This worked for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function show(str){
document.getElementById('sh2').style.display = 'none';
document.getElementById('sh1').style.display = 'block';
}
function show2(sign){
document.getElementById('sh2').style.display = 'block';
document.getElementById('sh1').style.display = 'none';
}
</script>
</head>
<body>
<p>
<input type="radio" name="r1" id="e1" onchange="show2()"/> I Am New User
<input type="radio" checked="checked" name="r1" onchange="show(this.value)"/> Existing Member
</p>
<div id="sh1">Hello There !!</div>
<p> </p>
<div id="sh2" style="display:none;">Hey Watz up !!</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
