單擊複選框展開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事件來解決它。

（更新：我太慢）

編輯：您可以簡化代碼有點過於如果你想...

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