如何用JS实现表格复选框全选并触发每个复选框的对应操作

问题原因 #

你当前的全选逻辑仅修改了单行复选框的checked属性，没有触发绑定在.check_box上的点击事件，因此行转编辑态的逻辑不会同步执行。

解决方案 #

直接修改你的全选复选框JS代码即可：

$(document).on('click', '.checkall', function(){
    // 拿到全选框的目标状态
    const targetChecked = this.checked;
    // 遍历所有单行复选框
    $(".check_box").each(function(){
        // 仅在当前状态和目标状态不一致时触发点击，避免多余的DOM重绘
        if(this.checked !== targetChecked){
            $(this).trigger('click');
        }
    });
});

说明 #

因为你的单行编辑逻辑已经完整绑定在.check_box的点击事件中，手动触发点击事件就会自动执行你预设的「行转编辑态/退出编辑态」逻辑，不需要再重复写一遍编辑逻辑，也能保证全选和单个勾选的表现完全一致。

内容的提问来源于stack exchange，提问作者Hazem Behairy