jQuery实现获取下拉框选中值并勾选相同value的复选框

原有代码问题梳理 #

• <select> 元素本身不存在 checked 属性，第一段代码中获取的 isACheckedd 永远为false，导致无法触发复选框勾选
• 属性选择器匹配带空格、特殊字符的value时需要用引号包裹，第一段代码未加引号导致选择器语法错误，无法匹配到对应元素
• 第二段代码错误读取不存在的data-capacity属性，且变量没有正确拼接到选择器中，导致选择器规则错误匹配到所有复选框，出现全选问题

可直接运行的实现代码 #

$(document).ready(function() {
  $('#enhanced').change(function() {
    // 获取下拉框当前选中值
    const selectedCategory = $(this).val();
    // 先清空所有对应分类复选框的选中状态，避免切换时残留勾选
    $('.enhancedcats').prop('checked', false);
    // 选中非默认选项时，勾选对应value的复选框
    if (selectedCategory !== 'none') {
      $(`.enhancedcats[value="${selectedCategory}"]`).prop('checked', true);
    }
  });
});

逻辑说明 #

• 兼容50个分类的场景，不需要修改代码即可直接适配新增的分类选项
• 选择器增加引号包裹变量，完美匹配带空格、特殊符号的分类value
• 切换下拉选项时自动清空之前的勾选，符合交互逻辑
• 选中默认的「Select your answer」选项时自动取消所有复选框勾选

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