Show/hide checkbox div on change and load

Question

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

jsFiddle

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

$cbtextbook.change(tbmb);
$cbimod.change(immb);

})​

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?

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"]();
    }).change();
});​

http://jsfiddle.net/bK8EC/118/

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.