修改

Question

我在一个页面上有几个复选框输入，是/否答案。我想隐藏切换div中的信息，直到单击no复选框。我想要一个简化的JQuery代码，它将适用于每个实例，并且div将在选中的“no”asnwer上独立显示。在此先感谢您的任何帮助或反馈！

<div>
<ul class="rank">
<li>
    <label>Do you like the colour blue?</label>
    <fieldset>
        <label><input  class="no" type="checkbox" /> No</label>
        <label><input  class="yes" type="checkbox" /> Yes</label>
    </fieldset>
    <div class="toggle">
        No, I do not like the colour blue!
    </div>
</li>
<li>
    <label>Do you like the colour red?</label>
    <fieldset>
        <label><input  class="no" type="checkbox" /> No</label>
        <label><input  class="yes" type="checkbox" /> Yes</label>
    </fieldset>
    <div class="toggle">
        No, I do not like the colour red!
    </div>
</li>
<ul>
</div>

<script type="text/javascript">
$(".toggle").hide();
    $(".no").click(function() {
if($(this).is(":checked")) {
    $(".toggle").show(500);
} else {
    $(".toggle").hide(500);
}
});

</script>

Answer 1

此代码应该有效：

$(".toggle").hide();
$(".no").change(function() {
    $(this).closest('li').find('.toggle').toggle(this.checked);
});

如果你想要动画：

$(".toggle").hide();
$(".no").change(function() {
    $(this).closest('li').find('.toggle')[this.checked ? 'show' : 'hide'](500);
});

修改

UXwise，您应该使用单选按钮而不是复选框来实现您想要实现的目标。一旦你改成单选按钮，上面的代码将不起作用，你需要一些修改。

这应该有效：

$(".toggle").hide();
$("input[type=radio]").change(function() {
    var toShow = this.checked && this.value == 'no';
    $(this).closest('li').find('.toggle')[toShow ? 'show' : 'hide'](500);
});

小提琴：http://jsfiddle.net/nrcC4/1/

当然，我使用class="no"而不是value="no"。它更符合人体工程学。

Answer 2

只是看看IT ppl的答案，但脚本是全局的。如果选中“否”，则两个切换都将响应。

我创造了一个小提琴来展示一个特定的相关切换。

PS：我建议使用带有是/否答案或下拉列表的单选按钮。

http://jsfiddle.net/d1m5n/Nj3gr/

HTML：

<div>
<ul class="rank">
<li>
    <label>Do you like the colour blue?</label>
    <fieldset>
        <label><input  class="no" type="checkbox" /> No</label>
        <label><input  class="yes" type="checkbox" /> Yes</label>
    </fieldset>
    <div class="toggle">
        No, I do not like the colour blue!
    </div>
</li>
<li>
    <label>Do you like the colour red?</label>
    <fieldset>
        <label><input  class="no" type="checkbox" /> No</label>
        <label><input  class="yes" type="checkbox" /> Yes</label>
    </fieldset>
    <div class="toggle">
        No, I do not like the colour red!
    </div>
</li>
<ul>
</div>

<强> jQuery的：

$(".toggle").hide();
    $(".no").click(function() {
    if($(this).is(":checked")) {
        $(this).parents("li").find('.toggle').show(500);
    } else {
        $(this).parents("li").find('.toggle').hide(500);
    }
});

Answer 3

$('.no').click(function() {
   $(this).parent().parent().next('.toggle').toggle(); 
});

.toggle {
    display:none;
}

http://jsfiddle.net/fuLUF/

Answer 4

$(".toggle").hide();
$(".no").click(function() {
    $(this).parents("li").find(".toggle").toggle();
});

JS fiddle to play with

Answer 5

只是委托事件方法的替代方案，它可能会给你更多的动力和表现。

$(".toggle").hide();

$(".rank li").on('click', '.no', function(e) {
    if($(this).is(":checked")) {
        $(e.delegateTarget).find(".toggle").show(500);
    } else {
        $(e.delegateTarget).find(".toggle").hide(500);
    }
});

当使用JQuery选中复选框时，如何隐藏然后显示多个Div

5 个答案:

修改