javascript - 如何在选中/取消选中复选框时切换(打开/关闭)行为？

Question

伙计们。我有一个无法解决的问题。我需要使用“.on/.off”方法来切换行为，当我设置或删除复选框中的勾号时，这些方法将起作用。我怎样才能做到这一点？

例如:我有一个按钮，按下它即可放大/更改颜色/移动。但是，当我在其中一个复选框上设置勾选时，我需要使用“.off”方法从按钮禁用此事件。

我尝试过

$(".button").on('click', function(){           
  $(this).toggleClass('active');
});

$(".button2").on('click', function(){
  $(this).toggleClass('active2');
});

$(".button3").on('click', function(){
  $(this).toggleClass('active3');
});

$(".button4").on('click', function(){
  $(this).toggleClass('active4');
});

var check = $("#check");
check.change(function(){
  if ($(this).is(':checked'))
  {
      $('.button').off('click');
  }




});

但由于某种原因，即使我从其中一个复选框中删除勾号，它也会禁用我的事件，直到我刷新页面

提前致谢。

Answer 1

发生这种情况是因为当您勾选该复选框时，您的代码将从 .button 元素中删除点击监听器，并且在取消选中该复选框时您不会将其设置回来。

因此，如果您希望在取消选中复选框时再次触发 .button 元素上的点击监听器，您可以执行下面提到的两件事中的任何一项。

首先，您可以在复选框的 change 监听器中的 if block 之后添加一个 else block 。以下代码适用于此方法:

var check = $("#check");
check.change(function(){
    if ($(this).is(':checked')) { 
        // This will remove the click listener from the button if checkbox is checked
        $('.button').off('click');
    } 
    else {
         // This will again add the click listener to the button if checkbox is not checked
         $(".button").on('click', function(){ 
             $(this).toggleClass('active'); 
         });
    }
});

但我不会推荐上述方法，因为它会不必要地增加代码的大小。

这是第二种更好的方法。在点击事件处理函数中，您可以添加一个 if 语句来检查复选框是否被选中。下面是相同的代码:

$(".button").on('click', function(){ 
    if (! $("#check").is(':checked')) { 
        // This will only be fired if checkbox is not checked
        $(this).toggleClass('active')
    }
});

您可以根据您的要求将此 if 添加到任何其他 block 。

使用上述代码的主要优点是:

1. 与第一种方法相比，代码不会增加
2. 您不需要复选框的 change 监听器(是的!只需将其删除即可!)