0

我在不同的选项卡中有两个表单，每个交叉字段的值都复制到另一个表单 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);
    }

})​

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

4

4 回答 4

2

采用

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

反而

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

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

于 2012-08-31T08:59:09.223 回答
1

AFAIK.is(':checked')在 DOM 上运行，因为它是通过网络渲染的，而不是当前的实时 DOM。

所以解决方案是.prop('checked')改用

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

版本 2 允许独立检查：

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

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

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

于 2012-08-31T08:39:21.100 回答
0

我发现了这个问题。这段代码可以正常工作

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

于 2012-08-31T09:12:20.223 回答
0

检查这个工作演示

你的代码有语法错误我已经纠正了请检查小提琴

于 2012-08-31T09:22:26.410 回答