Question

I have two forms in different tabs, each crossover field has it’s value duplicating to the other form onchange/keyup.

When my checkboxes change there is also a background image change to highlight the selection, for some reason I cannot figure out why but when the checkboxes are turned on they will not turn off again.

jsfiddle link > http://jsfiddle.net/UMwkV/

html

<fieldset class="fieldset-form left">                             
        <label>Flammable</label>
        <div class="clear"></div>
        <div class="flammable"></div>

        <input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
        </fieldset>

    <fieldset class="fieldset-form left">                             
        <label>Flammable</label>
        <div class="clear"></div>
        <div class="flammable"></div>

        <input type="checkbox" id="flammable" class="flamcheck" name="flammable" value="1" style="width:12px; height:12px; margin:0 auto; display:block; margin-top:5;">
        </fieldset>

jQuery

$("input[name=flammable]").change(function() {
    if ($('.flamcheck').is(":checked")) {
        $('.flammable').css("backgroundColor", "url(images/flame-on.png)");
        $('.flamcheck').prop("checked", true);
    }
    if (!$('.flamcheck').is(":checked")) {
        $('.flammable').css("backgroundImage", "url(images/flammable.png)");
        $('.flamcheck').prop("checked", false);
    }

})​

If anyone could point out the obvious thing I’m missing it would be greatly appreciated.

Answer 1

use

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

instead

http://jsfiddle.net/UMwkV/6/

$.is() returns true when at least one element matches the selector. Once when both boxes are checked, when you click on one box again, the other checkbox still will be checked, so is() will always return true when you run it on both checkboxes.