force refresh of part of page in browser

I have the following html:

<ul class="scr">
    <li class="scr">
        <input type="checkbox" class="chkscr"/>
        <h3>Item Name</h3>
        <div class="scr">Contents</div>
    </li>
    ....
</ul>

And the following jQuery:

//Set initial state of each scr section
$('.chkscr input, input.chkscr').each(function() {
    chkSCR_Click($(this));
});

//Setup click event
$('.chkscr input, input.chkscr').click(function() {
    chkSCR_Click($(this));
});

//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
    if (ctl.attr('checked')) {
        ctl.parents('li.scr').find('div.scr').stop().show();
    }
    else {
        ctl.parents('li.scr').find('div.scr').stop().hide();
    }
}

My issue is that when I toggle the last li element to display, the h3 element contents disapear开发者_开发知识库, until I click somewhere else on the page, or scroll the page up and down to cause the browse to repaint that portion of the window. I don't get this behavior in Opera for example, and even in IE the behavior only happens on the last li element, so I'm pretty sure it's an IE quirk and not my code. Is there any workaround I can do through jquery/javascript to force it to repaint the h3 element?

I cannot duplicate. I've somewhat refactored your code:

//Set initial state of each scr section
$('input.chkscr').each(function() {
    chkSCR_Click($(this));
});

//Setup click event
$('input.chkscr').click(function() {
    chkSCR_Click($(this));
});

//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
    if (ctl.attr('checked')) {
        ctl.siblings('div.scr').stop().show();
    }
    else {
        ctl.siblings('div.scr').stop().hide();
    }
}​

and have set up a fiddle here: http://jsfiddle.net/4KxHm/ but my thinking is (and I could well be wrong) that there's a borkage somewhere in your actual markup.