如何通过单击单选按钮显示/隐藏 DIV？答案

【问题标题】：How to show/hide DIV by clicking radio button?如何通过单击单选按钮显示/隐藏 DIV？
【发布时间】：2019-05-16 21:03:38
【问题描述】：

默认情况下，两个 DIV 都应该被隐藏。通过选择单选按钮，必须显示适当的 DIV（在其#ID 之后）。

下面是我的代码：

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

<style> .none { display:none; } </style>

但我们一次只能显示一个 div。有可能吗？

【问题讨论】：

为onchange事件调用jquery的hide()函数
不要在单个页面上使用 2 个相同的 id。
就像@KamilT 说的，你的HTML在这里无效

标签： jquery radio-button

【解决方案1】：

这可以使用 CSS 来完成。

注意：<div>s 必须是 <input> 元素的一般同级元素。

HTML：

<form>
    <input type="radio" name="showGreen"> Green
    <input type="radio" name="showRed"> Red
    <div id="green">I am the green div.</div>
    <div id="red">I am the red div.</div>
</form>

CSS：

#green, #red {
    display: none;
    padding: 10px;
}

#green {
    background-color: #6f6;
}

#red {
    background-color: #f44;
}

input[name="showGreen"]:checked ~ #green,
input[name="showRed"]:checked ~ #red {
    display: block;
}

JSFiddle：http://jsfiddle.net/Ly56w/

【讨论】：

【解决方案2】：

您可以在此处使用data-* 属性，例如：

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />

JS

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});

WORKING FIDDLE DEMO

【讨论】：

【解决方案3】：

试试这个：

HTML：

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank_div" class="none choice">Bank</div>
<div id="school_div" class="none choice">School</div>

JS：

$("input[type=radio]").click(function(event) {
    var myId = this.id;
    var targetId = myId + "_div";
    $("div.choice:not(#" + targetId + ")").addClass(".none");
    $("#" + targetId).removeClass(".none");
});

【讨论】：

这不会在点击时显示相应的div，而是隐藏它

【解决方案4】：

这是我使用 jQuery 的解决方案：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
function showBank()
{
$("#bankDIV").removeClass("none");
$("#bankDIV").addClass("showDIV");

//Make sure schoolDIV is not visible
$("#schoolDIV").removeClass("showDIV");
$("#schoolDIV").addClass("none");
}

function showSchool()
{
$("#schoolDIV").removeClass("none");
$("#schoolDIV").addClass("showDIV");

//Make sure bankDIV is not visible
$("#bankDIV").removeClass("showDIV");
$("#bankDIV").addClass("none");
}
</script>


</head>
<body>

<input type="radio" name='thing' value='valuable' id="bank" onclick="showBank()"/>
<input type="radio" name='thing' value='valuable' id="school" onclick="showSchool()"/>

<div id="bankDIV" class="none">Bank</div>
<div id="schoolDIV" class="none">School</div>

<style> 
.none { display:none; }, 
.showDIV { display:block; } 
</style>

</body>
</html>

确保您的代码中没有出现重复的 ID。并且一次只能看到一个 DIV。

问候，亚历克斯

【讨论】：

【解决方案5】：

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bankDiv" class="none">Bank</div>
<div id="schoolDiv" class="none">School</div>

<style> .none { display:none; } </style>

jQuery:

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this);
        ('input[type="radio"]').addClass('none');
        if (rad.is(':checked'))
            ('#' + rad.attr('id') + 'Div').removeClass('none');
    });
});

【讨论】：

【解决方案6】：

这对我有用：

<div class="form-group">
        <label>Please select Your Payment Option:</label><br>
        <input id='watch-me1' name='payment' type='radio' class='show-me1' value="Cash On Delivery" checked /> Cash On Delivery<br />
        <div id='show-me1' style='display:none;border:1px solid black;color:red;'>Not Available At This Moment!</div>

        <input id='watch-me2' name='payment' type='radio' class='show-me2' value="Bkash/Rocket Mobile" /> Bank<br />
        <div id='show-me2' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>

        <input id='watch-me3' name='payment' type='radio' class='show-me3' value="Credit/Debit Card" /> Credit/Debit Card<br />
        <div id='show-me3' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>

        <input id='watch-me4' name='payment' type='radio' class='show-me4' value="Paypal" /> Paypal<br />
        <div id='show-me4' style='display:none;border:1px solid black;'>Not Available At This Moment!</div>
    <script>
          $(function(){
          $(':radio').click(function() {
          $('#' + $(this).attr('class')).fadeIn().siblings('div').hide();
          })
         .filter(':checked').click();
          });
     </script>

    </div>

【讨论】：

对这个纯代码答案的一些额外解释可能会有所帮助。

【解决方案7】：

首先，对 2 个或更多控件使用相同的 id 并不是更好的方法...

请为每个元素创建一个唯一的 id。

使用此代码...

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="radio_divs">
<div id="bank_div" class="none">Bank</div>
<div id="school_div" class="none">School</div>
</div>
<style> .none { display:none; } 
.view { display:block; }
</style>

现在在单选按钮上使用 onclick...

jQuery("input[type=radio]").click(function(event) {
    jQuery('#radio_divs').children('div').each(function () {
        jQuery(this).addClass(".none");
    });
    jQuery("#" + this.id + "_div").addClass(".view");
});

它肯定会起作用，让它只有一个 div 可见，其余 div 让它不可见....

【讨论】：

【解决方案8】：

你也可以试试这个，

<input type="radio" name='thing' value='valuable' id="bank"/> <input type="radio" name='thing' value='valuable' id="school"/>

<div id="bankDiv" class="none">Bank</div> <div id="schoolDiv" class="none">School</div>

css

.none { display:none; }

jquery

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this).attr('id');           
            $('#' + rad + 'Div').show();
            $('#' + rad + 'Div').siblings('div').hide();
    });
});

看看这个小提琴：http://jsfiddle.net/Kritika/f2UKj/

【讨论】：