jquery - 如何为 jquery 多选添加全选和取消全选选项？

Question

我为我的下拉列表添加了 jquery 多选属性。下拉是这样的，

<div>
<select id="selectChartType" multiple="multiple" size="5" style="width:25px" >
      <option value="option1">option1</option>
      <option value="option2">option2</option>
      <option value="option3">option3</option>
      <option value="option4">option4</option>
      <option value="option5">option5</option>
      <option value="option6">option6</option>
      <option value="option7">option7</option>
      <option value="option8">option8</option>
      <option value="option9">option9</option>
      <option value="option10">option10</option>
</select>
</div>

我正在像这样初始化多选，

$(document).ready(function() {
     $("#selectChartType").multiselect({
     header:false,
     noneSelectedText:"options",
     minWidth: 190
      });
});

我想要下拉列表中有 2 个选项，分别是 checkall 和 uncheckall。我知道有一个选择，

$("#selectChartType").multiselect({CheckAll});

但是我不知道如何在html中添加它。请帮助我

Answer 1

你应该对 jquery 使用类似的东西

JQuery

$(document).ready(function(){

    $("#checkAll").click(function(){

        $('#selectChartType option').prop('selected', true);
    });
    $("#unCheckAll").click(function(){

        $('#selectChartType option').prop('selected', false);

     });
});

并在 HTML 中添加按钮为

<div>
    <select id="selectChartType" multiple="multiple" size="5" style="width:250px" >
          <option value="option1">option1</option>
          <option value="option2">option2</option>
          <option value="option3">option3</option>
          <option value="option4">option4</option>
          <option value="option5">option5</option>
          <option value="option6">option6</option>
          <option value="option7">option7</option>
          <option value="option8">option8</option>
          <option value="option9">option9</option>
          <option value="option10">option10</option>
    </select>
</div>
<input type="button" id="checkAll" value="check all">
<input type="button" id="unCheckAll" value="Un-check all">

你可以看到Demo在这里。

我猜您正在使用一些多选插件，那么您可能需要检查他们的文档或让我们知道您正在使用哪个插件来为您提供更多帮助。