I'm working on a show/hide div with checkbox on change and on load. I've come up with this so far:


$(document).ready(function() {

var $cbtextbook = $('#in-product_category-14'),
    $cbimod = $('#in-product_category-15'),
    $mb1 = $('#mbtextbook'),
    $mb2 = $('#mbimod');

function tbmb() {
    if ($cbtextbook.is(":checked")) $mb1.show();
    else $mb1.hide();

function immb() {
    if ($cbimod.is(":checked")) $mb2.show();
    else $mb2.hide();



At the moment, I'm not worrying about dynamically changing elements (although I might in the future as I learn more).

Is there a much cleaner way to do this? I did get pretty simple toggle to work, but that didn't take into account if the box was already checked on page load, and the div I wanted to show/hide could get off cycle (i.e. show when unclicked, hide when clicked) if it was already checked, so I came up with this overly verbose solution. How can I pare this down?


1 Answer 1


It could be done with:

$(document).ready(function() {
    $("input").change(function() {
        var index = $(this).closest("li").index();
        $(".metabox").eq(index)[this.checked ? "show" : "hide"]();


Remember to add proper qualifiers in your real code, for example add id="something" to your ul and then do $("#something input:checkbox") instead of just binding this event to every input on the page. The .metabox is also pretty fragile if a container isn't added.

  • \$\begingroup\$ this is awesome..and I might use it elsewhere, but I will have to find the metaboxes by id...as they are added dynamically and wont know where...and I have stripped out a lot of the code for simplicities sake...all the ul/li/div's are id'd and class'd. If I ID'd the metaboxes like mb-product_category-14 similar to the input IDs...could the id get stripped off the selector? (now I'm just talking out my rear like I know what I'm talking about!) \$\endgroup\$ Apr 24, 2012 at 1:51
  • \$\begingroup\$ New attempt...with selecting ID directly...seems to work :) But....jsfiddle.net/fDC3B \$\endgroup\$ Apr 24, 2012 at 2:16
  • \$\begingroup\$ @BrianThornton but what? jsfiddle.net/fDC3B seems to work fine. Though .substr(-2) is extremely fragile and works only for 2 digit numbers... You might wanna use .match(/\d+$/)[0] instead` \$\endgroup\$
    – Esailija
    Apr 24, 2012 at 13:54
  • \$\begingroup\$ That would be the reason for "but..." So twice you've stated that something is "fragile" can you elaborate or point me to a resource to help me avoid those in the future? Question marked as answered too! Thanks again for all the help! \$\endgroup\$ Apr 24, 2012 at 19:35
  • \$\begingroup\$ @BrianThornton By fragile I mean naive code that only assumes a very specific situation and will break in more general one that is feasible. For example, it is perfectly possible that the number might only be 1 digit or 3 digit, so substr(-2) won't work if that's the case. OTOH, the digits couldn't be in the form of a hexadecimal (I'm assuming), so you don't need to check for that. You can avoid them in the future by thinking about "weird" input that's still feasible and testing that against your code (mentally or physically). \$\endgroup\$
    – Esailija
    Apr 24, 2012 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.