显示/隐藏Divs多个单选按钮JQuery

时间:2013-04-21 20:36:36

标签: javascript jquery radio-button

我正在帮我的朋友Michaela参加我们的网页设计课程。她做了HTML,我只更改了一些行并添加了一些div。她希望如此,如果用户点击单选按钮,则会显示相应的div。她形式的所有div都隐藏在“hidden_​​destiny”类中。 - 这将是一系列嵌套的div,我可能需要稍后更改布局。

这是JsFiddle。  这是我的javascript:

if ($('#radio_starwars').is(':checked')){
    $('#clicked_starwars').hide().slideDown('slow');
    $('.hidden_destiny').not('#clicked_starwars').hide().slideUp('slow');
}
else if ($('#radio_avengers').attr('checked', 'true')){}
else if ($('#radio_batman').attr('checked', 'true')){}
else if ($('#radio_xmen').attr('checked', 'true')){}
else if ($('#radio_harryp').attr('checked', 'true')){}
else if ($('#radio_lotr').attr('checked', 'true')){}

[编辑]更新了代码。将id标识符添加到代码和更新的JsFiddle链接。

2 个答案:

答案 0 :(得分:2)

试试这段代码:

$(":radio").change(function(){
  $(".hidden_destiny").hide()//hide divs
  $("#clicked_"+this.id.replace("radio_","")).show()//show div by radio id
})

http://jsfiddle.net/YZ9fh/

答案 1 :(得分:2)

$('.fate').click(function () {
    $('.hidden_destiny').each(function () {
        if ($(this).is(':visible')) {
            $(this).slideUp('slow');
        }
    });
    var id = $(this).val();
    $('#clicked_' + id).slideDown('slow');
});

jsfiddle