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

您应该使用click事件来收听IE中复选框的检查。

Answer 2

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

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();

单击复选框以展开div，在IE7中不起作用

3 个答案: