Question

我在不同的标签中有两个表单，每个交叉字段的值都与onchange / keyup上的另一个表单重复。

当我的复选框更改时，还会更改背景图像以突出显示选择，由于某种原因我无法弄清楚原因，但是当复选框打开时，它们不会再次关闭。

jsfiddle链接＆gt; 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);
    }

})

如果有人能指出我错过的显而易见的事情，我将不胜感激。

Answer 1

使用

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

代替

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

$。是（）当至少一个元素与选择器匹配时返回true。一旦检查了两个框，当您再次单击一个框时，另一个复选框仍将被选中，因此当您在两个复选框上运行时，（）总是返回true。

Answer 2

~~AFAIK .is(':checked')针对DOM运行，因为它是通过网络呈现的，而不是当前的实时DOM。~~

所以解决方案是使用.prop('checked')代替

http://jsfiddle.net/UMwkV/1/

版本2允许独立检查：

http://jsfiddle.net/UMwkV/2/

版本3导致相互更新，两个复选框都是可点击的：

http://jsfiddle.net/UMwkV/8/

Answer 3

我想出了这个问题。这段代码可以正常使用

$(".flamcheck").change(function() {
  if ($(this).prop("checked") == true ) {
   $('.flammable').css("backgroundColor", "url(images/flame-on.png)");
   $('.flamcheck').prop("checked", true);
  }
  if ($(this).prop("checked") == false) {
   $('.flammable').css("backgroundImage", "url(images/flammable.png)");
   $('.flamcheck').prop("checked", false);
  }

});

选中此项 - http://jsfiddle.net/UMwkV/10/

Answer 4

检查此工作demo

您的代码有语法错误我已更正它请检查小提琴

jQuery复选框被锁定到检查状态

4 个答案: