How to use jQuery to show/hide divs based on radio button selection?
$(document).ready(function(){
$("input[name=group1]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
It's correct input[name=group1]
in this example. However, thanks for the code!
Update 2015/06
As jQuery has evolved since the question was posted, the recommended approach now is using $.on
$(document).ready(function() {
$("input[name=group2]").on( "change", function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
} );
});
or outside $.ready()
$(document).on( "change", "input[name=group2]", function() { ... } );
Original answer
You should use .change()
event handler:
$(document).ready(function(){
$("input[name=group2]").change(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
should work
Just hide them before showing them:
$(document).ready(function(){
$("input[name$='group2']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});