如何使用 jquery 在 html 多选框中创建“全选”选项？

Question

我正在制作一个包含多个选择框的 html 表单。 我想做的是在多个选择框中创建一个“全选”选项，这样如果用户单击该选项，如果用户取消选择所有其他选项，则选择框的所有选项将自动被选中。使用 jQuery 有什么想法吗？

<select MULTIPLE>
   <option>Select All</option>
   <option>value1</option>
   <option>value2</option>
   <option>value3</option>
   <option>value4</option>
   <option>value5</option>
   <option>value6</option>
</select>

Answer 1

我在点击事件的data-selected 属性中存储选项的状态（选择/未选择）。然后用它来选择/取消选择列表框的所有选项。

$("select").on("click", function(){      
  if ($(this).find(":selected").text() == "Select All"){
    if ($(this).attr("data-select") == "false")
      $(this).attr("data-select", "true").find("option").prop("selected", true);
    else
      $(this).attr("data-select", "false").find("option").prop("selected", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple data-select="false">>
  <option>Select All</option>
  <option>value1</option>
  <option>value2</option>
  <option>value3</option>
  <option>value4</option>
  <option>value5</option>
  <option>value6</option>
</select>

Answer 2

你可以用 jQuery 做这样的事情：

$('#selectAll').click(function() {
  $('#persons option').prop('selected', true);
});

$('#unselectAll').click(function() {
  $('#persons option').prop('selected', false);
});

input[type=button] {
  width: 100px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="selectAll" name="selectAll" value="Select All"><br />
<input type="button" id="unselectAll" name="unselectAll" value="Unselect All"><br /><br />


<select name="persons" id="persons" MULTIPLE size="8">
   <option value="FR">Franck</option>
   <option value="GE">Georges</option>
   <option value="DA">David</option>
   <option value="LU">Luc</option>
   <option value="DO">Donald</option>
   <option value="FR">FRANCOIS</option>
</select>