0

異なるタブに 2 つのフォームがあり、各クロスオーバー フィールドの値は、変更/キーアップ時に他のフォームに複製されます。

チェックボックスが変更されると、選択を強調表示する背景画像も変更されます。何らかの理由で理由がわかりませんが、チェックボックスがオンになっていると、再びオフになりません。

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() は、少なくとも 1 つの要素がセレクターと一致する場合に true を返します。両方のボックスがチェックされている場合、1 つのボックスをもう一度クリックすると、もう一方のチェックボックスは引き続きチェックされるため、両方のチェックボックスで 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 に答える