show and hide divs based on radio button click [duplicate]
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 .
You're on the right track, but you forgot two things:
- add the
descclasses to your description divs - You have numeric values for the
inputbut text for theid.
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/
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="Cars2" class="desc">
2 Cars Selected
</div>
<div id="Cars3" class="desc" style="display: none;">
3 Cars
</div>
</div>
JQuery
$(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/
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>
Here you can find exactly what you are looking for.
<div align="center">
<input type="radio" name="name_radio1" id="id_radio1" value="value_radio1">Radio1
<input type="radio" name="name_radio1″ id="id_radio2" value="value_radio2″>Radio2
</div>
<br />
<div align="center" id="id_data" style="border:5″>
<div>this is div 1</div>
<div>this is div 2</div>
<div>this is div 3</div>
<div>this is div 4</div>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
// show the table as soon as the DOM is ready
$("#id_data").show();
// shows the table on clicking the noted link
$("#id_radio1").click(function() {
$("#id_data").show("slow");
});
// hides the table on clicking the noted link
$("#id_radio2").click(function() {
$("#id_data").hide("fast");
});
});
$(document).ready(function(){} – When document load.
$("#id_data").show(); – shows div which contain id #id_data.
$("#id_radio1").click(function() – Checks radio button is clicked containing id #id_radio1.
$("#id_data").show("slow"); – shows div containing id #id_data.
$("#id_data").hide("fast"); -hides div when click on radio button containing id #id_data.
Thats it..
http://patelmilap.wordpress.com/2011/02/04/show-hide-div-on-click-using-jquery/
This should do what you need
http://jsfiddle.net/7Ud6B/
The hide selector was incorrect. I hid the blocks at page load and showed the selected value. I also changed the car div id's to make it easier to append the radio button value and create the proper id selector.
<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="car-2">
2 Cars
</div>
<div id="car-3">
3 Cars
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("div div").hide();
$("#car-2").show();
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div div").hide();
$("#car-"+test).show();
});
});
</script>
With $("div.desc").hide(); you are essentially trying to hide a div with a class name of desc. Which doesn't exist. With $("#"+test).show(); you are trying to show either a div with an id of #2 or #3. Those are illegal id's in HTML (can't start with a number), though they will work in many browsers. However, they don't exist.
I'd rename the two divs to carDiv2 and carDiv3 and then use different logic to hide or show.
if((test) == 2) { ... }
Also, use a class for your checkboxes so your binding becomes something like
$('.carCheckboxes').click(function ...
Your selector for the .show() and .hide() are not pointing to anything in the code.
Fixed version in jsFiddle
加载中,请稍侯......
精彩评论