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(){
    ...
});

哦，BTW，类应该像：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 {
     }
 });

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

3 个答案: