如何用JavaScript/jQuery实现复选框控制多选下拉框的选中与取消选中

嘿，我懂你现在的困扰——你的代码现在每次点击复选框都会直接把下拉框的选中值替换成当前点击的选项，所以之前选的都会被清空。这是因为对于支持多选的<select>，jQuery的.val()方法如果传单个值，会直接覆盖所有选中状态；而如果传一个值数组，它就能正确选中多个选项啦。

咱们来修改一下代码，让它能同步所有勾选的复选框状态：

$(document).ready(function() {
  const $select = $('#entry-select');
  const $checkboxes = $('.entrycheckbox');

  $checkboxes.on('change', function() {
    // 收集所有被勾选的复选框的value，组成数组
    const selectedValues = $checkboxes.filter(':checked').map(function() {
      return $(this).val();
    }).get();
    
    // 把数组传给select的val方法，实现多选中
    $select.val(selectedValues);
  });
});

关键改动说明： #

• 用change事件代替click：change更适合表单控件状态变化的场景，比如用户用键盘切换复选框状态时也能触发，兼容性更好。
• 收集所有选中的复选框值：通过filter(':checked')筛选出已勾选的复选框，再用map和get()把它们的value转换成数组。
• 给select传入值数组：$select.val(selectedValues)会自动匹配select里对应value的选项，选中所有匹配的项，同时取消未在数组里的选项的选中状态，完美同步复选框的状态。

完整的可运行代码： #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
  <select name="entries" id="entry-select" multiple>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
  </select>
</form>

<script>
$(document).ready(function() {
  const $select = $('#entry-select');
  const $checkboxes = $('.entrycheckbox');

  $checkboxes.on('change', function() {
    const selectedValues = $checkboxes.filter(':checked').map(function() {
      return $(this).val();
    }).get();
    
    $select.val(selectedValues);
  });
});
</script>

这样不管你勾选或取消哪个复选框，下拉框都会同步更新所有选中的选项啦～

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