隐藏与Jquery不工作的div

我想隐藏基于另一个电台组选择的div。只有在第一组单选按钮的值等于3时，才会显示底部集。我只是无法让它工作。我在这里做错了什么？隐藏与Jquery不工作的div

HTML：

<label> 
    <input name="Weekend" type="radio" id="Weekend_0" class="Weekend" value="1" checked="checked" /> 
    Saturday</label> 
<br /> 
<label> 
    <input type="radio" name="Weekend" value="2" class="Weekend" id="Weekend_1" /> 
    Sunday</label> 
<br /> 
<label> 
    <input name="Weekend" type="radio" id="Weekend_2" class="Weekend" value="3" /> 
    No</label> 

<br /> 

<div class="wrapper"> 

    <label> 
    <input name="AMPM" type="radio" id="AMPM_0" value="1" checked="checked" /> 
    AM</label> 
    <br /> 
    <label> 
    <input type="radio" name="AMPM" value="2" id="AMPM_1" /> 
    PM</label> 
    <br /> 

</div>

JS：

$('input:radio[name="Weekend"]').click(function() { 
    var $this = $(this); 
    if ($this.val() == 3) { 
     $this.nextAll('.wrapper').show(); 
    } else { 
     $this.nextAll('.wrapper').hide(); 
    } 
});

JSFiddle sample

谢谢！

来源

2014-02-10 user3084846

我不相信输入属于标签 – andrew

@andrew它应该没问题 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Examples和http： //www.w3.org/TR/html401/interact/forms.html#h-17.9.1和http://www.w3.org/TR/html5/forms.html#the-label-element –

简体JS：http://jsfiddle.net/digitalextremist/AwYjY/92/

$('input:radio[name="Weekend"]').click(function() { 
    if ($(this).val() == "3") { //de #1 
     $('.wrapper').show();  //de #2 
    } else { 
     $('.wrapper').hide();  //de #2 
    } 
});

注：

＃1：你需要使用文本值，而不是一个整数值。
对于＃2：您可以直接参考.wrapper，因为您的代码是。

扩展JS：http://jsfiddle.net/digitalextremist/AwYjY/91/

$(document).ready(function() { 
    $('input:radio[name="Weekend"]').click(function() { 
     toggleAMPM($(this).val()) 
    }); 
    $('input:radio[name="Weekend"]').each(function (i, e) { 
     if ($(e).is(':checked')) toggleAMPM($(e).val()) 
    }); 
}); 

function toggleAMPM(field) { 
    if (field == "3") { 
     $('.wrapper').show(); 
    } else { 
     $('.wrapper').hide(); 
    } 
}

在我的版本，扩展的一个，您还可以切换功能的页面加载运行，它不会在做简化版！您可能想要考虑显示的第二个选项。

来源

2014-02-10 18:47:22 digitalextremist

谢谢！这工作完美。 – user3084846

很高兴提供帮助。查看第二个选项的更新答案，您可能想要使用...也在页面加载上运行功能。 – digitalextremist

.wrapper不是单选按钮的兄弟。试试这个：

$this.parent().nextAll('.wrapper').show();

或

$this.parent().siblings('.wrapper').show();

如果你想简化：

http://jsfiddle.net/ENv2y/

$('input:radio[name="Weekend"]').click(function() { 
    var $this = $(this); 
    $this.parent().siblings('.wrapper').toggle($this.val() == 3); 
});

来源

2014-02-10 18:45:14

隐藏与Jquery不工作的div

回答

相关问题