如何使用jQuery显示/隐藏基于单选按钮选择的div？

问题描述：

我有一些单选按钮，我想根据选择哪个单选按钮显示不同的隐藏div。这里的HTML是什么样子：如何使用jQuery显示/隐藏基于单选按钮选择的div？

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div> 
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div> 
    <input type="submit" value="Submit"> 
</form> 

.... 

<style type="text/css"> 
    .desc { display: none; } 
</style> 

.... 

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc">consectetur adipisicing</div> 
<div id="opt3" class="desc">sed do eiusmod tempor</div>

而且这里是我的jQuery：

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("#"+test).show(); 
    }); 
});

的原因我在做这样的说法是因为被动态生成的我的单选按钮和申报单（价值单选按钮将始终具有相应的div）。上面的代码部分工作 - divs会显示何时检查正确的按钮，但我需要添加一些代码，以使div一旦隐藏按钮被取消选中。谢谢！

有趣的问题.... – 2015-10-01 10:39:37

作为@ STE-YEU提到的，请更正选择在您的jQuery的:) – 2016-06-26 07:55:06

答

更新2015/06

在jQuery已经演变因为这个问题被张贴，推荐的方法现在使用$.on

$(document).ready(function() { 
    $("input[name=group2]").on("change", function() { 

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

或外部$.ready()

$(document).on("change", "input[name=group2]", function() { ... });

原创回答

您应该使用.change()事件处理程序：

$(document).ready(function(){ 
    $("input[name=group2]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

应该工作

答

只是隐藏他们展示在他们面前：

$(document).ready(function(){ 
    $("input[name$='group2']").click(function() { 
     var test = $(this).val(); 
     $("div.desc").hide(); 
     $("#"+test).show(); 
    }); 
});

谢谢“硫基”，这正是我需要的 – 2010-05-05 23:14:17

感谢名单的人这一个帮助我.... – 2015-10-01 10:39:17

答

对同一简单的jQuery源 -

$("input:radio[name='group1']").click(function() {  
    $('.desc').hide(); 
    $('#' + $("input:radio[name='group1']:checked").val()).show(); 
});

为了使它更合适一点只是增加检查第一个选项 - 从造型

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

删除.desc类，并修改类似的div -

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> 
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

它真的会很好看任何─方法。

这帮助了我，谢谢 – 2012-12-16 09:41:21

答

$(document).ready(function(){ 
    $("input[name=group1]").change(function() { 
     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

在这个例子中是正确的input[name=group1]。但是，感谢代码！

答

<script type="text/javascript"> 
$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 

<div id="blk-1" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name1:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 

</div> 
<div id="blk-2" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name2:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 
</div>

答

一个有趣的解决方案是让此声明：您刚才给应显示与它所依赖的复选框或单选按钮的id属性automaticallyVisibleIfIdChecked每格。也就是说，你的表格是这样的：

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> 
</form> 
.... 
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> 
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

，并有很好的使用函数式编程一些页面的JavaScript无关：

function executeAutomaticVisibility(name) { 
    $("[name="+name+"]:checked").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); 
    }); 
    $("[name="+name+"]:not(:checked)").each(function() { 
     $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); 
    }); 
} 

$(document).ready(function() { 
    triggers = $("[automaticallyVisibleIfIdChecked]") 
     .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) 
    $.unique(triggers); 
    triggers.each(function() { 
     executeAutomaticVisibility(this.name); 
     $(this).change(function(){ executeAutomaticVisibility(this.name); }); 
    }); 
});

相若方式

你可以自动与属性automaticallyEnabledIfChecked启用/禁用表单字段。

我觉得这个方法很好，因为它避免了为你的页面创建特定的JavaScript - 你只需插入一些属性来说明应该完成什么。

如何使用jQuery显示/隐藏基于单选按钮选择的div？

相关推荐