jquery - 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事件而不是 aclick然后检查按钮状态。

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