Question

嗨我有几个实例，其他开发人员（做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>

Answer 1

http://jsfiddle.net/gJ9fC/

Jquery的：

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

  });
});

由于您使用切换，因此无需检查是否选中了复选框。当您使用切换时，jquery会删除该类或添加，取决于您所要求的内容！

O和我删除了.terms，因为你没有它。你可以使用.subproducts

Answer 2

只需对jQuery进行少量更改，即可实现您想要的功能。并且不要忘记在您的css文件中添加.checked类。

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

Example

使用label标记的另一个示例。我相信它对用户体验更方便。

Example using label

firefox在选中/未选中复选框输入时不添加/删除类

2 个答案: