1

我正在编写一个表单，它有复选框，并且我编写了一个脚本来显示和隐藏它们（特别是在选择其中一个复选框时隐藏所有其他复选框）。
当我需要它来隐藏输入复选框时，我已经走到了这一步，但是下面的代码正在做的是：它只显示了 1 个复选框（第二个）。为什么，我怎样才能同时隐藏两个复选框？

$('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>
4

2 回答 2

2

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

$('input.individual:checkbox, input.organization:checkbox')
//                          ^ see here
于 2013-10-03T22:26:08.080 回答
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');
    }
});
于 2013-10-03T22:35:14.037 回答