如何使用 jQuery 根据单选按钮选择显示/隐藏 div？答案

【问题标题】：How to use jQuery to show/hide divs based on radio button selection?如何使用 jQuery 根据单选按钮选择显示/隐藏 div？
【发布时间】：2011-02-16 03:43:37
【问题描述】：

我有一些单选按钮，我希望根据选择的单选按钮显示不同的隐藏 div。下面是 HTML 的样子：

<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 是动态生成的（单选按钮的值将始终具有相应的 div）。上面的代码部分工作 - 当正确的按钮被选中时，div 将显示，但我需要添加一些代码以使 div 在取消选中按钮后再次隐藏。谢谢！

【问题讨论】：

正如@ste-yeu 提到的，请在您的jQuery 中将选择器更正为'group1' :)

标签： jquery radio-button mouseclick-event

【解决方案1】：

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();
    }); 
});

应该工作

【讨论】：

我将此添加到输入 <?php if($ic==1) {echo "checked"; $ic++;} ?> 以便检查默认单选按钮是否有效，但 jquery 不会触发 div

【解决方案2】：

在显示之前隐藏它们：

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

【讨论】：

【解决方案3】：

同样的简单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>

无论如何它都会很好看。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

<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>

【讨论】：

【解决方案6】：

一个有趣的解决方案是使这个声明性：你只需给每个应该显示的 div 一个属性automaticallyVisibleIfIdChecked 以及它所依赖的复选框或单选按钮的 id。也就是说，您的表单如下所示：

<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 - 您只需插入一些说明应该做什么的属性。

【讨论】：

【解决方案7】：

以下代码非常适合我：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});

.box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
    label{ margin-right: 15px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
        <label><input type="radio" name="colorRadio" value="red"> red</label>
        <label><input type="radio" name="colorRadio" value="green"> green</label>
        <label><input type="radio" name="colorRadio" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div>
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div>

【讨论】：

【解决方案8】：

我写了一个简单的代码来让你了解如何在 jquery 中显示和隐藏单选按钮非常简单

<div id="myRadioGroup">

    Value Based<input type="radio" name="cars" checked="checked" value="2"  />

    Percent Based<input type="radio" name="cars" value="3" />
    <br>
    <div id="Cars2" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Value</label>
       <input type="text" id="txtPassportNumber" class="form-control" />
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Percent</label>
       <input type="text" id="txtPassportNumber" class="form-control" />
    </div>
</div>
</div>

jQuery 代码

$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});

给我cmets

【讨论】：

【解决方案9】：

您可以使用 jQuery 的 show() 和 hide() 方法。如下：

JQuery：

  $(document).ready(function(){
    $('input[type="radio"]').click(function(){
      var val = $(this).attr("value");
      var target = $("." + val);
      $(".msg").not(target).hide();
      $(target).show();
    });
  });

HTML：

<input type="radio" name="color" value="yellow"> Yellow
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green

<div class="yellow msg">You have selected Yellow</div>
<div class="red msg">You have selected Red</div>
<div class="green msg">You have selected Green</div>

这里是一个例子：Show/hide DIV based on Radio Button click

【讨论】：