jQuery的複選框CSS改變

Question

我對jQuery的很新，今天我想這下面的代碼

$("#new").click(function() { 
    $('#new:checked').closest('p').css('color', 'white'); 
}); 

這工作得很好，當我點擊複選框，但是當我取消選中該複選框，它不會更改回到原來的顏色回來..

我如何實現CSS的以前的狀態我勾去掉之後？

謝謝

Answer 1

$("#new").click(function() { 
    $(this).closest('p').css('color', this.checked?'white':'blue'); // just change the blue for your preference.... 
}); 

但我建議你使用類..

$("#new").click(function() { 
    if (this.checked){ 
     $(this).closest('p').addClass('white'); 
    } else { 
     $(this).closest('p').removeClass('white'); 
    } 
}); 

或

$("#new").click(function() { 
    $(this).closest('p').toggleClass('white',this.checked); 
}); 

你應該有這樣的

.white { 
    color: white; 
} 

一個CSS定義210

Answer 2

$("#new").toggle(function() { 
    $('#new:checked').closest('p').css('color', 'white'); 
}, function() { 
    $('#new:checked').closest('p').css('color', 'black'); 
}); 

你可以做ü要改變。即使你可以檢查複選框是否被選中。 否則，如果您知道複選框的加載狀態，並且如果它始終相同，則不需要檢查「已檢查」。

Answer 3

不添加任何新的東西，只是包括更簡潔的方式，以相同的結果：

$("#new").click(function() { 
    var color = "black"; 
    if($(this).is(':checked')) color = "white"; 
    $(this).closest('p').css('color', color); 
});