Нажатие на флажок для расширения div, не работает в IE7

Question

Следующий код отлично работает в FF, но не в IE7 - при установке флажков в IE div не переключается.

Как мне решить подобные проблемы - есть ли у кого-нибудь идеи, как это сделать?

// hide divs
$('.product-optional-toggle1').css({ display: 'none'}); 
$('.product-optional-toggle2').css({ display: 'none'}); 
$('.product-optional-toggle3').css({ display: 'none'}); 

// toggle divs when checkbox is checked
$('.product-optional-checkbox1').change(function () {
    if($(this).attr("checked") === "true") {
        $('.product-optional-toggle1').toggle('fast');  
        return;
    }
    $('.product-optional-toggle1').toggle('fast');  

});

$('.product-optional-checkbox2').change(function () {
    if($(this).attr("checked") === "true") {
        $('.product-optional-toggle2').toggle('fast');  
        return;
    }
    $('.product-optional-toggle2').toggle('fast');  

});

$('.product-optional-checkbox3').change(function () {
    if($(this).attr("checked") === "true") {
        $('.product-optional-toggle3').toggle('fast');  
        return;
    }
    $('.product-optional-toggle3').toggle('fast');  

});

Answer 1

IIRC, события IE onchange для флажков ведут себя странно (по сравнению с другими браузерами), и я решил это с помощью встроенного события click.

(обновление: я слишком медленный)

edit: вы можете немного упростить свой код, если хотите ...

for( var i = 1; i < 3; ++i ){
    $('.product-optional-toggle' + i).css({ display: 'none'}); 

    // toggle divs when checkbox is checked
    $('.product-optional-checkbox' + i).change(function () {
        if($(this).attr("checked") === "true") {
            $('.product-optional-toggle' + i).toggle('fast');  
            return;
        }
        $('.product-optional-toggle' + i).toggle('fast');      
    });
}

Answer 2

Вы должны использовать событие click для прослушивания проверки флажка в IE.

Answer 3

Это должно быть нейтрально для браузера:

// toggle divs when checkbox is checked
$('.product-optional-checkbox1').click(function () {
    $('.product-optional-toggle1').toggle('fast');  
});

$('.product-optional-checkbox2').click(function () {
    $('.product-optional-toggle2').toggle('fast');  
});

$('.product-optional-checkbox3').click(function () {
    $('.product-optional-toggle3').toggle('fast');  
});

// hide divs
$('.product-optional-toggle1').hide(); 
$('.product-optional-toggle2').hide(); 
$('.product-optional-toggle3').hide();