jQuery复选框被锁定为选中状态

jQueryCheckboxes being locked to checked state

本文关键字：状态 锁定 复选框 jQuery      更新时间：2023-09-26

我在不同的选项卡中有两个表单，每个交叉字段的值都复制到另一个表单onchange/keyup。

当我的复选框更改时，背景图像也会更改以突出显示所选内容，出于某种原因，我不知道为什么，但当复选框打开时，它们不会再次关闭。

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

如果有人能指出我遗漏的显而易见的东西，我将不胜感激。

使用

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

而是

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

当至少有一个元素与选择器匹配时，$.is（）返回true。一旦两个复选框都被选中，当您再次单击其中一个复选框时，另一个复选复选框仍将被选中，因此当您在两个复选盒上运行is（）时，它将始终返回true。

AFAIK .is(':checked')在DOM上运行，因为它是通过连线呈现的，而不是当前活动的DOM

因此，解决方案是使用.prop('checked')而不是

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

版本2允许独立检查：

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

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

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

我发现了这个问题。此代码将正常工作

$(".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/

检查此工作演示

你的代码有语法错误，我已经更正了，请检查fiddle

相关文章：