0

こんにちは、他の開発者 (CSS/HTML を行っている) がいくつかのオプションを、ユーザーがクリック/タップして「チェック」するチェックボックスとしてコーディングした例がいくつかあります。

$(document).ready(function() {
  $('.terms input:checkbox').change(function(){
     if($(this).is(":checked")) {
       $(this).parent().toggleClass("checked");
     }
  });
});

これは Chrome では問題なく動作しますが、Firefox では何もしません(OSX で最新)。

理由はありますか？ここで私はひどく間違ったことをしましたか?

編集:HTMLを提供していないことをお詫び申し上げます:-/

 <div class="terms">
   <input type="checkbox" name="terms" value="Acepto las condiciones" />
   <p class="checkbox"></p>
   <p>Acepto las condiciones <a title="Términos y condiciones" href="static.html">?</a></p>
</div>
4

2 に答える 2

1

http://jsfiddle.net/gJ9fC/

Jクエリ:

$(document).ready(function() {
    $('input:checkbox').change(function() {
       $(this).parent().toggleClass("checked");

  });
});

トグルを使用するため、チェックボックスがオンになっているかどうかを確認する必要はありません。トグルを使用すると、jquery はクラスを削除するか、追加します。

O と私は .terms を持っていないので削除しました。.subproducts を使用できます

于 2013-03-12T10:46:34.593 に答える
1

jQuery を少し変更するだけで、やりたいことを実現できます。.checkedcss ファイルにクラスを追加することを忘れないでください。

$(document).ready(function() {
  $('.terms input:checkbox').on('change', function(){          
      $(this).parent().toggleClass("checked");   
    });
});

例

labelタグを使用した別の例。私が信じているのは、ユーザーエクスペリエンスにとってより便利であるということです.

ラベルの使用例

于 2013-03-12T10:47:14.150 に答える