CODEWITHSUNDEEP
javascriptjquerycheckboxfadeinfadeout
Altin Ukshini
Altin Ukshini

Reputation: 235

Showing, hiding checkboxes with jquery using fadeIn fadeOut

I am writing a form, it has checkboxes, and I wrote a script to show and hide them (specifically hide all other checkboxes when one of them is selected).
I reached this far when I need this to hide the input checkboxes, but what this code below is doing, is: it shows only 1 of checkboxes (the second one). Why, how can I hide both of the checkboxes at the same time ?

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

this is my 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>

Upvotes: 1

Views: 601

Answers (2)

Rocky Balboa
Rocky Balboa

Reputation: 1486

Is this the effect you wanted to achieve?

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

Upvotes: 2

Musa
Musa

Reputation: 97672

Use a , in the selection string to select multiple groups of elements

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

Upvotes: 2

Related Questions