8

当我使用 jQuery 函数 addClass 和 removeClass 在 Internet Exploer (IE) 中更改复选框的外观时，它们无法正常工作。但是，它们在其他浏览器中运行良好。

这是说明我的问题的示例代码：

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

要进一步测试这一点，您可以使用 jsFiddler 运行代码（在 IE 中不起作用）：http: //jsfiddle.net/tejek/pZJMd/

4

2 回答 2

4

$('#chkbox')如果您希望它仅与一个复选框一起使用，则您的选择器应该是具有 id chkbox的复选框，或者$('input:checkbox')如果您希望它与每个复选框一起使用则应该是。

此外，最好使用更改事件而不是单击事件，因为如果更改是通过鼠标单击以外的其他方式进行的，则单击事件（理论上）不应触发。

也许尝试这样的事情：

$('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

见演示。

如果它没有帮助，然后尝试在 HTML 中手动添加和删除类，看看问题是否可能不是添加类，但没有显示通过一些奇怪的怪癖模式渲染或其他东西添加类的效果。

确保以这样的方式开始您的 HTML：

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

确保您始终充分利用 IE 渲染引擎。

于 2011-03-10T10:14:33.963 回答
1

这个选择器input:#chkbox看起来很奇怪。试试#chkbox你是否只有一个带有 ID 的元素#chkbox（这恰好是一个<input />字段）。

此外，您可能应该缓存 的结果$('#chkbox')，例如：

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

您甚至可以使用.toggleClass()（switch第二个参数，未经测试）：

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

免责声明
不，这不能解释为什么它在 Fx、Chrome 等而不是 IE 中工作。我猜浏览器之间的选择器实现有些不同。一般来说，这甚至可能无法解决问题，而只会暗示潜在的问题（以及“更清洁”的解决方案）。

于 2011-03-10T09:49:35.287 回答