选中单选按钮后显示/隐藏 div答案

【问题标题】：show/hide div after selected radio button选中单选按钮后显示/隐藏 div
【发布时间】：2013-06-25 00:41:18
【问题描述】：

我有三个单选按钮，每个按钮后面都有一个 div，如下所示：

<input type="radio" name="radios" id="my_radio_1" value="" />
<div id="my_radio_1_text" style="display:none;">Content for radio 1</div>

<input type="radio" name="radios" id="my_radio_2" value="" />
<div id="my_radio_2_text" style="display:none;">Content for radio 2</div>

<input type="radio" name="radios" id="my_radio_3" value="" />
<div id="my_radio_3_text" style="display:none;">Content for radio 3</div>

如您所见，div 最初是用display:none; 隐藏的。我想要做的是在每个单选按钮被选中时立即显示 div（如果未选择单选按钮，我想在它之后隐藏 div）。通过执行以下操作选择单选按钮后，我可以显示 div：

$(document).on('change', 'input:radio[name=radios]', function(){

    $('#' + $(this).attr('id') + '_text').show();

});

But I don't know how to hide the div when another radio button is selected.请问有什么想法吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

在显示新的之前将它们全部隐藏：

$(document).on('change', 'input:radio[name=radios]', function(){
    $('div[id$="_text"]').hide(); // hide all divs whose id ends in _text
    $('#' + this.id. + '_text').show();
});

如果你不喜欢隐藏然后显示的想法，你也可以使用

$('div[id$="_text"]').not('#' + this.id. + '_text').hide();
$('#' + this.id. + '_text').show();

但没有理由打扰（在您的事件处理程序结束之前不会呈现屏幕）。

【讨论】：

【解决方案2】：

单击单选时，您可以执行以下操作。

$(document).on('change', 'input:radio[name=radios]', function(){
    $('div[id^="my_radio_"]').hide(); // hide all DIVs begining with "my_radio_"
    $('#' + $(this).attr('id') + '_text').show(); // show the current one
});

说明

隐藏所有 id 以“my_radio_”开头的 div
按照您现在的方式显示当前 DIV

【讨论】：

【解决方案3】：

我所做的是在显示选中的那个之前隐藏所有divs。给你的 div 一个 myDiv 类，并在显示它们之前使用 javascript 隐藏它们：

$(document).on('change', 'input:radio[name=radios]', function(){
    $('.myDiv').hide();
    $('#' + $(this).attr('id') + '_text').show();
});

【讨论】：

【解决方案4】：

这样

$(document).on('change', 'input:radio[name=radios]', function () {
    $('input:radio[name=radios]').next().hide(); // hide all divs after radio
    $(this).next().show(); // show the div next to current radio button
});

【讨论】：