jQuery - 如何防止合并类上的单击事件也被解释为单个类上的单击事件

Question

我监听 2 次点击事件。选中复选框时触发第一个：

        $('#example').on('click', '.option', function(){
        // Some logic
    });

第二个在未选中时触发：

            $('#example').on('click', '.checked.option', function(){
        // Some other logic
    });

至于HTML输入元素，我尝试以各种方式对其应用类：

class="checked option"
class="checked.option"
class="option checked"
class="option.checked"

但无论哪种情况，当取消选中复选框时 - 两个事件都会被触发，而不仅仅是第二个事件。

问：有没有办法防止这种情况发生？或者有没有更方便的方法来检测复选框上的点击事件并且它未选中？

谢谢。

Answer 1

几种方法：

$('#example').on('click', '.option', function(){
    if ($(this).is(':checked')) ...
});

请参阅checked选择器 http://api.jquery.com/checked-selector/

或：

$('#example').on('click', '.option:not(.checked)', function(){
    ...
});

请参阅not选择器 http://api.jquery.com/not-selector/

甚至：

$('#example').on('click', '.option:not(:checked)', function(){
    ...
});
$('#example').on('click', '.option:checked', function(){
    ...
});

哦，顺便说一句，类应该像这样应用：class="option checked"，你永远不应该在类属性中放置.。

Answer 2

问：有没有办法防止这种情况发生？或者有没有更方便的方法来检测复选框上的点击事件并且它未选中？

是的，下面的代码应该阻止它，我会使用 jQuery 选择器（方便的 imo）来检测这一点。希望这有帮助！谢谢。

$('input:checkbox').click(function () {
    if ($(this).is(":checked")) {
        alert('was un-checked');               
    } else {
        alert('was checked');
    }
});

在此处查看代码工作：

http://jsfiddle.net/SCSZ6/

Answer 3

实际上应该使用 change 事件而不是click，然后检查按钮状态。

 $('#example').on('change', '.option', function() {
     if( this.checked ) {
     }
     else {
     }
 });