如何在HTML多选select的optgroup前添加可点击勾选的复选框

原生<optgroup>不是可交互的表单控件，没有内置checked状态，浏览器不会为其触发选中相关事件，你之前写的optgroup:checked伪类选择器没有匹配场景，所以生成的复选框无法响应点击切换状态。

1. 调整CSS代码 #

新增自定义类控制optgroup的勾选状态，同时优化排版对齐：

body {
  padding: 15px;
}

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

/* 新增optgroup相关样式 */
.select-checkbox optgroup::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
/* 用自定义checked类替代原生的:checked伪类 */
.select-checkbox optgroup.checked::before {
  content: "\2611";
}
/* 调整缩进对齐 */
.select-checkbox optgroup {
  padding-left: 0;
}
.select-checkbox optgroup option {
  padding-left: 1.3em;
}

2. 调整jQuery代码 #

新增optgroup点击事件实现全选/反选，同时补充单选项点击时的组状态同步逻辑：

// 原有option点击逻辑，补充组状态同步
$('option').mousedown(function(e) {
    e.preventDefault();
    var $select = $(this).parent().parent();
    var originalScrollTop = $select.scrollTop();
    $(this).prop('selected', !$(this).prop('selected'));
    // 同步所属optgroup的勾选状态
    syncOptgroupState($(this).parent('optgroup'));
    $select.focus();
    setTimeout(function() {
        $select.scrollTop(originalScrollTop);
    }, 0);
    return false;
});

// 新增optgroup点击事件，实现全选/反选
$('optgroup').mousedown(function(e) {
    e.preventDefault();
    var $select = $(this).parent();
    var originalScrollTop = $select.scrollTop();
    var $options = $(this).find('option');
    // 判断当前组是否全选
    var isAllChecked = $options.filter(':selected').length === $options.length;
    // 切换所有子选项状态
    $options.prop('selected', !isAllChecked);
    // 切换optgroup自身勾选状态
    $(this).toggleClass('checked', !isAllChecked);
    $select.focus();
    setTimeout(function() {
        $select.scrollTop(originalScrollTop);
    }, 0);
    return false;
});

// 同步optgroup状态的公共方法
function syncOptgroupState($optgroup) {
    var $options = $optgroup.find('option');
    var isAllChecked = $options.filter(':selected').length === $options.length;
    $optgroup.toggleClass('checked', isAllChecked);
}

// 页面初始化时同步所有optgroup的初始状态
$('optgroup').each(function() {
    syncOptgroupState($(this));
});

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