更改複選框的父元素css（如果選中或取消選中）

基本上我有一個td元素內的複選框，當複選框被選中時我希望它具有一個背景顏色，而當複選框未選中時我想要它具有一個背景顏色。換句話說，我希望它突出顯示它是否被選中。更改複選框的父元素css（如果選中或取消選中）

我試圖用相同的解決方案在這裏：Jquery toggle event is messing with checkbox value

但出於某種原因，我不能得到它的工作。

$(document).ready(function(){ 
    $("input:checkbox").change(function() { 
     if($(this).attr("checked") === "true") { 
      // CHECKED, TO WHITE 
      $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"}); 
      return; 
     } 
     //NOT CHECKED, TO GREEN 
     $(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"}); 
    }); 
});

它會添加綠色背景顏色，但不會將其刪除。如果我選中了一個複選框，刷新，td會回到白色，再次單擊該複選框，取消選中它，它會將td的背景更改爲綠色。

我還是個新手，不知道這裏有什麼可能是錯誤的，一直試圖弄清楚現在幾個小時。這樣簡單的事情，但只是不能得到它的工作。

來源

2009-11-27 Ragnar

更改

if($(this).attr("checked") === "true")

到

if($(this).attr("checked") === true)

Snce您使用嚴格等於兩個數據類型必須相同比較。

typeof ($(this).attr ("checked"))

會讓你知道，它是布爾類型的和你比較它與一個字符串。

欲瞭解更多信息請參閱Comparison Operators

來源

2009-11-27 11:33:00 rahul

謝謝你，這個作品很有魅力。我不得不切換顏色值，出於某種原因點擊複選框時，它會給出if內的值，而不是另一個。這可能是什麼原因？ – Ragnar 2009-11-27 11:39:49

嘗試修改此：

$(this).attr("checked") === "true"

這樣：

!!$(this).attr("checked") === true

這將任何非布爾值轉換爲布爾，讓你的類型安全的比較工作，即使字符串「true」（如果返回字符串false，它將通過...評估爲真）

來源

2009-11-27 11:31:30 cmcculloh

非常感謝，這個作品！ – Ragnar 2009-11-27 11:40:32

檢查出在javascript =，==和===的區別這article。或者js中的平等運算符this。

來源

2009-11-27 11:34:49 Fermin

有一個更好的方法，如果該複選框已被檢查：

$(this).is(':checked')

這是一個比較穩健的。

來源

2009-11-27 11:41:56

謝謝，這種方法和另一種方法一樣好，但更簡單一點。 – Ragnar 2009-11-27 11:47:41

如果（$（本）.attr（「選中」）=== 「真」）

attr不讀取HTML屬性。這是欺騙性的。如果它確實讀取了屬性，則checked的字符串值將是'checked'而不是'true'。但它不這樣做。

它實際上做的是讀取JavaScript對象屬性，只在屬性名稱不同的地方使用屬性名稱而不是屬性名稱。該checked財產給你一個布爾值，所以沒有必要把它比作什麼，你可以說：

if ($(this).attr('checked'))

，或者更簡單，在完全等同：

if (this.checked)

來源

2009-11-27 12:18:34 bobince

最好的一個是

if($("this").is(':checked')) 
{ 
    $(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"}) 
}

來源

2014-09-09 13:30:34 Gautam

更改複選框的父元素css（如果選中或取消選中）

回答

相關問題