Question

$('.chk-box').on('click',function(){
  $('.chk-box').removeClass('fa-square');
  $('.chk-box').addClass('fa-check-square', 'active');
});

我想要它，所以如果你单击.chk-box而它是fa-square它会添加fa-check-square并激活但是我如何制作它以便删除fa-check-square并添加fa-square和active你点击fa-check-square

Answer 1

您可以使用toggleClass：

$('.chk-box').on('click',function(){
    $(this).toggleClass('fa-square fa-check-square active');
});

如果该类已经在元素上，它将删除它，反之亦然。此外，您应该在处理程序中使用this仅使类更改影响单击的元素。

API docs

Answer 2

可以尝试另一种替代方式，

$('.chk-box').on('click',function(){
  var this=$(this);
  if(this.hasClass('fa-square')) {
    this.removeClass('fa-square').addClass('fa-check-square active');
  } else {
    this.removeClass('fa-check-square active').addClass('fa-square');
  } 
});

Answer 3

HTML：

<input type="checkbox" class="fa-square"/>

jquery的：

$('.chk-box').on('click',function(){
$(this).toggleClass('fa-square fa-check-square active');

}）;`

如何来回交换类 - jQuery

3 个答案: