代码之家 › 专栏 › 技术社区 › Altin Ukshini

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

fadeout fadein checkbox jquery javascript

Altin Ukshini · 技术社区 · 11 年前

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

2 回复 | 直到 11 年前

Musa 11 年前

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

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

Rocky Balboa 11 年前

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

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