点击父元素切换复选框并同步显示选中值的问题

我在div中放置了一组自定义样式的复选框，期望点击父元素（示例中使用td）时可切换复选框状态，同时在Result标题下显示选中的复选框文本。目前点击父元素切换复选框功能正常，但仅点击复选框/标签时才会同步显示选中值，点击父元素时无法触发该显示更新。

现有代码 #

//Checkbox selection
jQuery("td input[type='checkbox'],td label").on('click', 
  function(e){
    e.stopPropagation();
});

// Check/uncheck checkboxes clicking on its parent div
jQuery("td").click(function(){
     var arr = jQuery(".chkbox:checked").map(function() { return jQuery(this).prev().html(); }).get();
    var chk = jQuery(this).find("input[type='checkbox']");
    if(chk.is(":checked") == false)
    {
        chk.prop("checked", true);
    }
    else
    {
        chk.prop("checked", false);
    }
    
});
//Displayes the selected checkbox text
jQuery(function() {
  jQuery(".chkbox").change(function() {
    var arr = jQuery(".chkbox:checked").map(function() { return $(this).prev().html(); }).get();
    jQuery("#myDiv").html(arr.join(','));
  });
});

问题核心是：通过prop()手动修改复选框的checked状态时，浏览器不会自动触发change事件，而显示更新逻辑仅绑定了change事件，所以点击td时无法触发更新。只需在td点击事件中修改完复选框状态后，手动触发change事件即可。

修改后的完整代码 #

//Checkbox selection
jQuery("td input[type='checkbox'],td label").on('click', 
  function(e){
    e.stopPropagation();
});

// Check/uncheck checkboxes clicking on its parent div
jQuery("td").click(function(){
    var chk = jQuery(this).find("input[type='checkbox']");
    // 切换复选框状态
    chk.prop("checked", !chk.is(":checked"));
    // 手动触发change事件，触发显示更新
    chk.trigger('change');
});

//Displayes the selected checkbox text
jQuery(function() {
  jQuery(".chkbox").change(function() {
    var arr = jQuery(".chkbox:checked").map(function() { return jQuery(this).prev().html(); }).get();
    jQuery("#myDiv").html(arr.join(','));
  });
});

说明 #

• 保留原有的阻止复选框/标签点击冒泡逻辑，避免点击它们时重复触发td的点击事件
• 简化了复选框状态切换代码，用!chk.is(":checked")直接取反，更简洁
• 关键新增chk.trigger('change');，手动触发复选框的change事件，让显示更新逻辑执行

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