Question

我正在写一个表单，它有复选框，我编写了一个脚本来显示和隐藏它们（特别是当选择其中一个时隐藏所有其他复选框）。
当我需要这个来隐藏输入复选框时，我达到了这个目的，但是下面这段代码正在做的是：它只显示了一个复选框（第二个）。为什么，如何同时隐藏两个复选框？

$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal")

这是我的HTML：

                <div class="field check check-entity">
                    <label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br>
                    <input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label>
                    <input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label>
                    <input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label>
                </div>

Answer 1

在选择字符串中使用,选择多组元素

$('input.individual:checkbox, input.organization:checkbox')
//                          ^ see here

Answer 2

这是你想要达到的效果吗？

http://jsfiddle.net/z37br/

<强> HTML：

<div class="field check check-entity">
    <label for="entity_type">For what kind of entity are you requesting sponsorship?
        <span class="form_required">*</span>
    </label>
    <br><br>

    <input type="checkbox" name="entity_type" value="entity_project" data-type="project"/>
    <label for="entity_project" class="lalbe_project">Project</label>

    <input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/>
    <label for="entity_individual"class="label_individual">Individual</label>


    <input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/>
    <label for="entity_organization" class="label_organization">Organisation</label>
</div>

<强> JS：

$('input').change(function() {
    if ($(this).prop('checked')) {
        var clickedCheckboxType = $(this).attr('data-type');

        $('input').each(function() {
            if (clickedCheckboxType != $(this).attr('data-type')) {
                $(this).fadeOut('fast');
                $(this).next().fadeOut('fast');
            }
        });
    }
    else {
        $('input').fadeIn('fast');
        $('input').next().fadeIn('fast');
    }
});

使用fadeIn fadeOut显示，使用jquery隐藏复选框

2 个答案: