Question

I need to target multiple classes by their exact text match. Half of my code appears to work (the text has a purple background when the checkbox is unchecked), but when checking the checkbox to target the text, nothing seems to be happening…

if ($("input:checkbox:checked#checkbox-id").length > 0) {
        $('#main-content-panel .entry').filter(function(index) { 
        return $(this).text() == "Text"; }).css
        ('backgroundColor', 'orange'); 
        }

if ($("input:checkbox:not(:checked)#checkbox-id").length > 0) {
        $('#main-content-panel .entry').filter(function(index) { 
        return $(this).text() == "Text"; }).css
        ('backgroundColor', 'purple'); 
        }

jsFiddle: http://jsfiddle.net/KKfEF/

Answer 1

You should listen to the change event:

var $elem = $('#main-content-panel .entry').filter(function (index) {
    return $(this).text() == "Text";
});
$('#checkbox-id').change(function () {
    var color = this.checked ? 'orange' : 'purple';
    $elem.css('backgroundColor', color);
}).change();

http://jsfiddle.net/drcpY/