jQuery if（x == y）不起作用

Question

So, I have some faux checkboxes (so I could style them) that work with jQuery to act as checked or not checked. There are a number of faux checkboxes in my document, and for each one I have a click function:

var productInterest = [];
productInterest[0] = false;
productInterest[1] = false;
productInterest[2] = false;

// here is one function of the three:

$('#productOne').click(function() {
    if (productInterest[0] == false) {
        $(this).addClass("checkboxChecked");
        productInterest[0] = true;
    } else {
        $(this).removeClass("checkboxChecked");
        productInterest[0] = false;
    }
});

The problem seems to be that there is an error in the if statement, because it will check, but not uncheck. In other words it will add the class, but the variable won't change so it still thinks its checked. Anybody have any ideas? Thanks for your help.

UPDATE: So, I need to show you all my code because it works in the way I supplied it (thanks commenters for helping me realize that)... just not in the way its actually being used on my site. so below please find the code in its entirety.

Everything needs to happen in one function, because the UI and data for each checkbox need to be updated at once. So here is the complete function:

$('input[name=silkInterest]').click(function() { // they all have the same name

    var silkInterest = [];
    silkInterest[0] = false;
    silkInterest[1] = false;
    silkInterest[2] = false;

    if ($(this).is('#silkSilk')) { // function stops working because the .is()
        if (silkInterest[0] == false) {
            $(this).addClass("checkboxChecked");
            silkInterest[0] = true;
        } else {
            $(this).removeClass("checkboxChecked");
            silkInterest[0] = false;
        }
        alert(silkInterest[0]);
    }
    if ($(this).is('#silkAlmond')) {
        if (silkInterest[1] == false) {
            $(this).addClass("checkboxChecked");
            silkInterest[1] = true;
        } else {
            $(this).removeClass("checkboxChecked");
            silkInterest[1] = false;
        }
    }
    if ($(this).is('#silkCoconut')) {
        if (silkInterest[2] == false) {
            $(this).addClass("checkboxChecked");
            silkInterest[2] = true;
        } else {
            $(this).removeClass("checkboxChecked");
            silkInterest[2] = false;
        }
    }

    var silkInterestString = silkInterest.toString();
    $('input[name=silkInterestAnswer]').val(silkInterestString);
    // This last bit puts the code into a hidden field so I can capture it with php.

});

Answer 1

I can't spot the problem in your code, but you can simply use the class you're adding in place of the productInterest array. This lets you condense the code down to a single:

// Condense productOne, productTwo, etc...
$('[id^="product"]').click(function() {
    // Condense addClass, removeClass
    $(this).toggleClass('checkboxChecked');
});

And to check if one of them is checked:

if ($('#productOne').hasClass('checkboxChecked')) {...}

This'll make sure the UI is always synced to the "data", so if there's other code that's interfering you'll be able to spot it.

Answer 2

Okay, just had a palm to forehead moment. In regards to my revised code- the variables get reset everytime I click. That was the problem. Duh.