Question

问题简介：

我正在处理一个查询表单，我创建了一个包含5个不同值输入的复选框组。我希望他们做的是，当选择至少其中一个时，显示隐藏的#element（除了一个复选框 - ＃ch1）。

HTML

<form>
<div class="group">
    <label>
        <input name="check[]" id="ch1" type="checkbox" value="1"/>
        Option 1
    </label>
    <label>
        <input name="check[]" id="ch2" type="checkbox" value="2"/>
        Option 2            
    </label>
    <label>
        <input name="check[]" id="ch3" type="checkbox" value="3"/>
        Option 3
    </label>
    <label>
        <input name="check[]" id="ch4" type="checkbox" value="4"/>
        Option 4
    </label>
    <label>
        <input name="check[]" id="ch5" type="checkbox" value="5"/>
        Option 5
    </label>
</div>
<div id="hidden">
    <p>Hidden message</p>
</div>    
</form>

jQuery - 我设法做的事情......

$('input[name="check[]"').click(function(){
        if (this.checked) {
            $('#hidden').toggle('slow');
        }
        else {
            $('#hidden').hide('slow');
        }
});

总结：

如果至少选中了一个复选框（＃ch2 /＃ch3 /＃ch4 /＃ch5）或所有复选框 - div #hidden必须可见;

如果没有选中复选框或checbox＃ch1 - div #hidden必须保持隐藏状态。

fiddle

提前谢谢大家！

修改如果有人有兴趣，请工作小提琴HERE

Answer 1

首先，当您想要进入特定州时，不应该使用.toggle，您应该使用.show或.hide。其次，你只是检查他们点击的盒子是否被检查，而不是检查是否有任何盒子被检查。

你的小提琴根本不起作用，因为你没有把代码放在onDomReady处理程序中，所以它在加载DOM之前就已经运行了。

$('input[name="check[]"').click(function(){
    if ($('input[name="check[]"]:checked').length > 0) {
            $('#hidden').show('slow');
        }
        else {
            $('#hidden').hide('slow');
        }
});

DEMO

Answer 2

在这种情况下，课程表现非常出色。您有许多要将事件绑定到的html元素。试试这个HTML：

<form>
<div class="group">
    <label>
        <input class="checked" name="check[]" id="ch1" type="checkbox" value="1"/>
        Option 1
    </label>
    <label>
        <input class="checked" name="check[]" id="ch2" type="checkbox" value="2"/>
        Option 2            
    </label>
    <label>
        <input class="checked" name="check[]" id="ch3" type="checkbox" value="3"/>
        Option 3  
    </label>
    <label>
        <input class="checked" name="check[]" id="ch4" type="checkbox" value="4"/>
        Option 4
    </label>
    <label>
        <input class="checked" name="check[]" id="ch5" type="checkbox" value="5"/>
        Option 5
    </label>
</div>
<div id="hidden" style="display:none;">
    <p>Hidden message</p>
</div>    
</form>

你的JavaScript为：

$(document).ready(function(){
    $('.checked').change(function(){
        if ($('input:checked').length > 0) {
            $('#hidden').show('slow');
        } else {
            $('#hidden').hide('slow');
        }
    });
});

您不仅可以使用该类将元素分组到更改事件，还可以使用它来检查“已检查”和/或复选框。此代码将监视所有更改的复选框，只要检查其中一个复选框，就会显示消息。 Barmar对于JavaScript没有在正确的时间运行也是对的。您可以使用jQuery＆＃39; $（document）.ready（）来处理它。

Javascript / jQuery - 选中其中一个复选框时显示隐藏的#element

2 个答案: