More efficient javascript boolean

Question

I have a checkbox and some <div>s that show/hides whenever a checkbox is checked. Now it all works great but it could be more efficient.

jQuery("#filtertype").change(function () {
    if (jQuery("#posttype").is(":checked")) {
        jQuery("#postblock").slideDown("slow");
    } else {
        jQuery("#postblock").slideUp("slow");
    }

    if (jQuery("#taxonomycat").is(":checked")) {
        jQuery("#taxonomyblock").slideDown("slow");
    } else {
        jQuery("#taxonomyblock").slideUp("slow");
    }

    if (jQuery("#taxonomytag").is(":checked")) {
        jQuery("#taxonomyblocktag").slideDown("slow");
    } else {
        jQuery("#taxonomyblocktag").slideUp("slow");
    }

    if (jQuery("#fieldjeskey").is(":checked")) {
        jQuery("#fieldblock").slideDown("slow");
    } else {
        jQuery("#fieldblock").slideUp("slow");
    }

    if (jQuery("#sliderme").is(":checked")) {
        jQuery("#sliderblock").slideDown("slow");
    } else {
        jQuery("#sliderblock").slideUp("slow");
    }
});

This works like it should; it gets the ID of the checkbox <input> and for every <input> (#filtertype, #taxonomycat etc.) it will show or hide a <div> (#postblock, #taxonomyblock etc.)

It may be smarter to get the ID of every <input> and toggle the slideUp, slideDown function.

How can this be done?

Rory McCrossan · Accepted Answer · 2013-08-15 12:01:29Z

4

Firstly, rather than have a list of id selectors, put a single class of each of those checkboxes, along with a data attribute to specify the relation. Something like this:

<input type="checkbox" name="posttype" class="filter-checkbox" data-rel="postblock" value="foobar" />

Then in javascript you can simplify all the code above to the following:

jQuery("#filtertype").change(function() {
    $('.filter-checkbox').each(function() {
        var func = this.checked ? 'slideDown' : 'slideUp';
        $('#' + $(this).data('rel'))[func]('slow');
    });
});

Example fiddle

answered Aug 15, 2013 at 12:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Trekdrop Over a year ago

Actually it's not yet exactly what I want.. Say I have 3 checkboxes. The ones that are checked must shown a div. The not selected ones not. How to get this?

Trekdrop Over a year ago

It's acting a bit strange: As I check the first checkbox the first time, the foobar will come up. When I uncheck it, nothing happens, only when I uncheck the other one it disappears.

Rory McCrossan Over a year ago

@LarsKerff your fiddle seems to work fine, although your HTML has a lot of errors in it.

Trekdrop Over a year ago

It's because there's some php in it indeed.

Rory McCrossan Over a year ago

The PHP was fine - it was invalid because of improper attributes (option) random closing tags, and various other things. Either way, here's a fixed version using my example above: jsfiddle.net/BEkes/6

|

Niet the Dark Absol · Accepted Answer · 2013-08-15 12:00:04Z

4

It could be more efficient by not using jQuery.

Replace all of your jQuery("#someID").is(":checked") with
document.getElementById('someID').checked, and short of writing your own lightweight animation engine that's as good as you'll get.

Or you can go down the dark path of obscurity:

jQuery("#postblock")["slide"+(document.getElementById('posttype').checked ? "Down" : "Up")]("slow");

But that's probably not a good idea :p

answered Aug 15, 2013 at 12:00

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Collectives™ on Stack Overflow

More efficient javascript boolean

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related