Javascript 使用fadeIn淡出显示、隐藏jquery复选框

我正在编写一个表单，它有复选框，我编写了一个脚本来显示和隐藏它们（特别是在选中其中一个复选框时隐藏所有其他复选框）。
当我需要它来隐藏输入复选框时，我达到了这一步，但下面的代码所做的是：它只显示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>

您申请赞助的是哪类实体？*


项目
个人
组织

在选择字符串中使用

，

选择多组元素

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

---

在选择字符串中使用

，

选择多组元素

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

---

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

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>

$('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');
    }
});

---

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

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>

$('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');
    }
});

---

发布你的html以便我们可以帮助你。发布你的html以便我们可以帮助你。注意，我已经更改了你用来存储复选框类型的属性。您使用了类名，但这可能会让人困惑。您可以创建或拥有“data-”属性，并使用该属性。它不会更改功能，但会使其更具可读性。请注意，我已更改了用于存储复选框类型的属性。您使用了类名，但这可能会让人困惑。您可以创建或拥有“data-”属性，并使用该属性。它不会改变功能，但会让它更具可读性。