addClass和removeClass在Internet Explorer中不工作

當我使用它們更改Internet Explorer（IE）中複選框的外觀時，jQuery函數addClass和removeClass無法正常工作。但是，它們在其他瀏覽器中運行良好。addClass和removeClass在Internet Explorer中不工作

下面是示例代碼來說明我的問題：

$('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/

來源

2011-03-10 Tejek

此選擇input:#chkbox似乎奇怪的。如果只有一個ID爲#chkbox的元素，則嘗試#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-10 09:49:35 jensgram

或者，'$ chkbox.checked'如果你確定它是一個''，比照。 [利用jQuery的強大功能來訪問元素的屬性]（http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element ）。 – jensgram 2011-03-10 10:11:21

你的選擇要麼是$('#chkbox')如果你想讓它只有一個複選框，一個ID爲chkbox工作，或者它應該是$('input:checkbox')如果你想讓它與每一個複選框工作。

此外，最好使用change事件而不是click事件，因爲如果更改是通過鼠標單擊以外的其他操作實現的，則click事件（理論上）不應觸發。

也許嘗試這樣的事：

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

見DEMO。

如果它沒有幫助，然後嘗試在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-10 10:14:33 rsp

+1好點。 – jensgram 2011-03-10 10:17:26

謝謝，現在我才知道，如何在IE中獲得固定的大部分渲染問題 – 2013-09-20 08:41:27

addClass和removeClass在Internet Explorer中不工作

回答

相關問題