使用jQuery的prop()方法勾选复选框时未触发绑定的onClick事件

直接通过JS修改DOM元素的选中状态时，不会模拟真实用户的交互行为，因此不会主动触发绑定在元素上的onclick事件回调。
这是浏览器的原生机制：只有用户通过鼠标、键盘操作和元素产生真实交互时，才会按事件流执行绑定的回调函数。通过prop()方法修改checked属性，仅会更新元素的实时状态值，不会触发事件执行流程，因此绑定的totalIt()不会自动运行。

方法1：最小改动适配现有代码 #

在按钮的点击逻辑中，设置完复选框的选中状态后，主动调用totalIt()函数，直接复用已有的计算逻辑即可：

$(document).ready(function(){
    $(".default").click(function(){
        $("#bit8").prop("checked", true);
        $("#bit9").prop("checked", true);
        // 状态更新后手动执行计算逻辑
        totalIt();
    });
});

也可以选择在设置完属性后，手动触发元素的click事件，让绑定的onclick回调自动执行：

$(document).ready(function(){
    $(".default").click(function(){
        $("#bit8").prop("checked", true);
        // 触发元素绑定的click回调
        $("#bit8").trigger('click');
        $("#bit9").prop("checked", true);
        $("#bit9").trigger('click');
    });
});

方法2：更易维护的优化实现 #

把HTML中内联的onclick绑定移除，将事件逻辑统一抽到JS代码中管理，避免逻辑散落在页面结构里：

1. 首先修改HTML，删除两个复选框上的内联onclick="totalIt()"属性：

   <input class="form-check-input" name="values" value="256" type="checkbox" id="bit8" /> 
   <span class="code">0x00000100</span><br>
   <input class="form-check-input" name="values" value="512" type="checkbox" id="bit9" /> 
   <span class="code">0x00000200</span> <br>
   

2. 在JS中统一绑定事件逻辑：

   $(document).ready(function(){
       // 给所有值复选框绑定状态变化的计算逻辑
       $('input[name="values"]').on('change', totalIt);
   
       $(".default").click(function(){
           // 批量设置两个复选框为选中状态
           $("#bit8, #bit9").prop("checked", true);
           // 批量触发change事件，自动执行绑定的计算逻辑
           $("#bit8, #bit9").trigger('change');
       });
   });
   

• 对于checked、disabled这类元素的实时状态属性，使用prop()修改是正确的，不要误用attr()操作HTML标签的静态属性，否则会出现状态更新不一致的问题。
• 手动触发事件时要避免递归死循环：如果回调函数内部会再次修改触发事件的元素状态，需要加判断逻辑防止反复触发导致调用栈溢出。
• 把计算逻辑封装为独立函数的写法可以最大程度复用代码，不需要在不同的触发场景下重复编写求和、转换进制的逻辑。

内容的提问来源于stack exchange，提问作者Fahim F.