javascript - 如何使用 JavaScript/jQuery 选择/取消选择带有复选框的选择选项？

Question

我对 JavaScript 或 jQuery 几乎一无所知。

我需要在 <select> 中选择/取消选择一个选项单击复选框或按钮时可以选择多个选项。

复选框需要选择/取消选择具有相同值的选项。我的想法是这样的:

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

  checkboxes.click(function() {
    var element = $(this);
    var value = element.val();
    input.val(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>

这仅选择具有上次单击的复选框值的选项，而不选择选中的选项，并且取消选择所有其他选项。

Answer 1

您只需为 val() 提供最后选择的复选框的值。要按照您的要求进行此操作，您需要构建所有选定复选框的数组并将其提供给 val() 。

要实现此目的，您可以使用 filter() 获取选定的复选框，然后使用 map() 构建数组:

input.val(checkboxes.filter(':checked').map((i, el) => el.value));

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

  $checkboxes.click(function() {
    $input.val($checkboxes.filter(':checked').map((i, el) => el.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>

如果您不希望用户直接更改所选的选项，您可能还需要考虑将readonly 添加到select。