Question

我有Check All函数检查所有复选框。我使用JQuery来做到这一点。

但我也有这个on change函数将类切换到包装器div：

$('input[type="checkbox"]').on('change', function(){
    $(this).closest('div').toggleClass('highlight');
});

单击复选框时会运行该功能，但如果单击Check all则不会。

有没有办法使用JQuery手动触发事件？或者有更好的解决方案吗？

由于

修改

这是简化的HTML：

<a id="check_all">Check All</a>
<div>
    <input type="checkbox" name="cb" value="abc">ABC<br>
</div>
<div>
    <input type="checkbox" name="cb" value="pqr">PQR<br>
</div>
<div>
    <input type="checkbox" name="cb" value="xyz">XYZ<br>
</div>

这是JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

Answer 1

点击检查后，你应该像这样调用change（）事件

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").prop('checked', true).change();
    });
});

Answer 2

这将触发change事件，但只有在您首先绑定它之后才会触发。

$('input[type="checkbox]').trigger('change');

Answer 3

你可以试试这个，

$(document).on('change','input[type="checkbox]' ,function(){
     // $this will contain a reference to the checkbox
      var $this = $(this);   
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT
         $(this).closest('div').toggleClass('highlight');
    }
});

希望它能帮助，

Answer 4

几乎与visnu的答案相同，但直接调用click（）将触发jQuery绑定的所有点击事件。如果你演示这个，你会看到它也取消选中这些框，而他的回答只是在它们被点击时删除了高亮。

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        $(this).closest('div').toggleClass('highlight');
    });

    $("#check_all").on('click', function(){
        $("input[type='checkbox']").click();
    });
});

Answer 5

检查代码的这个小提琴修改：http://jsfiddle.net/d4VTh/51/

$(document).ready(function(){
    $("input[type='checkbox']").on('change', function(){
        if (this.checked)
            $(this).closest('div').addClass('highlight');
        else 
            $(this).closest('div').removeClass('highlight');
    });

    $("#check_all").on('click', function(){
        var item = $("input[type='checkbox']")
        item.prop('checked', !item.prop('checked')).change();
    });
});

JQuery - 如果使用JQuery检查，则不会触发Checkbox on-change事件

5 个答案: