Question

我有2个单选按钮。当我点击其中一个时，会出现新的div。当我选择第二个按钮时，我希望它消失。

先谢谢你。

<p><label>Type</label><input type='radio' name='affType' value='private' class='short_filed' checked /> Private <input type='radio' name='affType' value='company' class='short_filed return'/> Company</p>

<div class="hidden">
    <p><label>Name</label><input type='text' name='companyName' value=''  /></p>
</div>


<script>
$(".hidden").hide(400);
$('.return').change(function(){
   if(this.checked){
      $('.hidden').show( "slide", 400);
   }else{
      $('.hidden').hide( "slide", 400);
   }
});
</script>

Answer 1

WORKING FIDDLE

$(".hidden").hide(400);
$('input[type="radio"]').change(function(){
    if($(this).val() == 'company'){
      $('.hidden').show();
   }else{
      $('.hidden').hide();
   }
});

Answer 2

您需要更改逻辑，因为您只检查是否选中了复选框，而不是其实际值。

此外，更改您的选择器，因为您只是在第二个单选按钮上收听change事件：

$(".hidden").hide(400);
$('input[name="affType"]').change(function(){
    if($(this).is(':checked') && $(this).val() == 'company'){
      $('.hidden').show();
   }else{
      $('.hidden').hide();
   }
});

jsFiddle Demo

Answer 3

您需要更改JQuery脚本，如下所示......或者尝试 JSFiddle LINK

<script type="text/javascript">
        $(document).ready(function () {
        $('.short_filed').bind('change',function () {
            $('.hidden').toggle();
        });
    });
</script>

如果您需要仅在公司单选按钮选择和取消选择时隐藏和显示文本框，请按照以下代码...

<script type="text/javascript">
            $(document).ready(function () {
            $('.return').bind('change',function () {
                $('.hidden').toggle();
            });
        });
    </script>

Answer 4

您可以将其简化为：

$('input.short_filed').change(function() {
    $('.hidden').toggle( this.checked && this.value == 'company' );
}).filter(':checked').change();

因此，它会检查复选框的状态和值，然后根据结果切换.hidden。

页面加载时，.filter(':checked').change()会在选中的复选框上触发change()事件，因此您无需拨打('.hidden').hide()/show()。

Here's a fiddle

Answer 5

看一下下面的代码示例：

<p>
    <label>Type</label><input type='radio' name='affType' value='private' class='short_filed' checked />
    Private
    <input type='radio' name='affType' id="radComp" value='company' class='short_filed return' />
    Company</p>

<div class="hidden" style="display: none">
    <p>
        <label>Name</label><input type='text' name='companyName' value=''  /></p>
</div>


<script type="text/javascript" language="javascript">
    $('input[type = radio]').change(function () {
        if (this.value == "company") {
            $('.hidden').show("slide", 400);

        } else {
            $('.hidden').hide("slide", 400);
        }
    });
</script>

单选按钮显示和隐藏div 2

5 个答案:

Here's a fiddle