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

Question

提问by M Thomas

I have some radio buttons and I'd like to have different hidden divs show up based on which radio button is selected. Here's what the HTML looks like:

我有一些单选按钮，我希望根据选择的单选按钮显示不同的隐藏 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>

And here's my jQuery:

这是我的 jQuery：

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

The reason I'm doing it that way is because my radio buttons and divs are being generated dynamically (the value of the radio button will always have a corresponding div). The code above works partially - the divs will show when the correct button is checked, but I need to add in some code to make the divs hide again once the button is unchecked. Thanks!

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

Answer 1

回答by Z. Zlatev

Update 2015/06

更新 2015/06

As jQuery has evolved since the question was posted, the recommended approach now is using $.on

自从问题发布以来 jQuery 已经发展，现在推荐的方法是使用 $.on

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

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

or outside $.ready()

或外面 $.ready()

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

Original answer

原答案

You should use .change()event handler:

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

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

should work

应该管用

Answer 2

回答by albertein

Just hide them before showing them:

在显示它们之前隐藏它们：

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

Answer 3

回答by Ste Yeu

$(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!

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

Answer 4

回答by Rajesh Hatwar

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

Answer 5

回答by Hans-Peter St?rr

An interesting solution is to make this declarative: you just give every div that should be shown an attribute automaticallyVisibleIfIdCheckedwith the id of the checkbox or radio button on which it depends. That is, your form looks like this:

一个有趣的解决方案是使其具有声明性：您只需为每个应该显示的 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>

and have some page independent JavaScript that nicely uses functional programming:

并且有一些与页面无关的 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); } );
    });
});

Similarily you could automatically enable / disable form fields with an attribute automaticallyEnabledIfChecked.

同样，您可以自动启用/禁用具有属性的表单字段automaticallyEnabledIfChecked。

I think this method is nice since it avoids having to create specific JavaScript for your page - you just insert some attributes that say what should be done.

我认为这种方法很好，因为它避免了为您的页面创建特定的 JavaScript - 您只需插入一些说明应该做什么的属性。

Answer 6

回答by Bharat

The simple jquery source for the same -

相同的简单 jquery 源 -

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

In order to make it little more appropriate just add checked to first option --

为了使它更合适一些，只需将检查添加到第一个选项 -

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

remove .desc class from styling and modify divs like --

从样式中删除 .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>

it will really look good any-ways.

无论如何它都会看起来很好。

Answer 7

回答by Pradeep

Below code is perfectly workd for me:

下面的代码非常适合我：

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

Answer 8

回答by Siraj Ahmed

I wrote a simple code to unterstand you to how to make a show and hide radio buttons in jquery its very simple

我写了一个简单的代码来让您了解如何在 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 code

查询代码

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

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

give me comments

给我评论

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

提问by M Thomas

回答by Z. Zlatev

回答by albertein

回答by Ste Yeu

回答by Rajesh Hatwar

回答by Hans-Peter St?rr

回答by Bharat

回答by Pradeep

回答by Siraj Ahmed

相关推荐

最近更新

标签

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

提问by M Thomas

回答by Z. Zlatev

回答by albertein

回答by Ste Yeu

回答by Rajesh Hatwar

回答by Hans-Peter St?rr

回答by Bharat

回答by Pradeep

回答by Siraj Ahmed

相关推荐

jQuery - 从类的元素中获取属性的值列表

jQuery Jquery对话框打开另一个页面

jQuery 使用 AJAX 加载跨域端点

jQuery UI 手风琴 CSS

相关推荐

最近更新

标签