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属性中存储选项的状态（已选中/未选中）。然后用它来选择/取消选择列表框的所有选项。

＆＃13;

$("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);
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: