javascript - 单击复选框以展开 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 事件表现得很奇怪(与其他浏览器相比)，我通过使用安装的点击事件解决了这个问题。

(更新:我太慢了)

编辑:如果你愿意，你也可以稍微简化你的代码......

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');      
    });
}