Question

我有三个单选按钮，每个单元后面有一个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();

});

但是当我选择另一个单选按钮时，我不知道如何隐藏div。有什么想法吗？

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

但是没有理由去打扰（直到你的事件处理程序结束才会呈现屏幕）。

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

<强>解释

在“my_radio _”
显示当前正在进行的DIV

Answer 3

我所做的是在显示所选的divs之前隐藏所有myDiv。给你的div一个$(document).on('change', 'input:radio[name=radios]', function(){ $('.myDiv').hide(); $('#' + $(this).attr('id') + '_text').show(); });类，并在显示它们之前使用javascript隐藏它们：

{{1}}

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

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

4 个答案: