Question

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

<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
      });
});

我想在下拉列表中输入两个选项，说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。

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

Answer 2

更有趣：

<div>
<select id="selectChartType" multiple="multiple" size="5">
      <option value="all">Select All</option>
      <option value="option1">option1</option>
      <option value="option2">option2</option>
      <option value="option3">option3</option>
      <option value="option4">option4</option>

</select>
</div>
$(document).ready(function(){

    var clicker=0;
    $("#selectChartType option[value='all']").click(function(e){
        clicker++;
        $(this).prop('selected', false);
        if(clicker%2!=0){


        $("#selectChartType option[value!='all']").prop('selected', true);
        }
       else
        $("#selectChartType option[value!='all']").prop('selected', false);

     });
});

FIDDLE DEMO

Answer 3

您可以按

进行初始化

**$(document).ready(function() {
 $("#selectChartType").multiselect({
 header:true, /* Contains CHeck all and Uncheck all */
 noneSelectedText:"options",
 minWidth: 190
  });

}）; **

此致 Krishna Kumar S

Answer 4

//Uncheck all Options
        var selected = $("#sectorId option:selected");
        var totaloptions = $("#selectChartType option");
        if (selected.length == totaloptions.length) {

            $('.ms-selectall').trigger('click');
        }
        else {
            $('.ms-selectall').trigger('click');
            $('.ms-selectall').trigger('click');
        }

Answer 5

使用Jquery选中和取消选中带有复选框的多选输入。

我的解决方案：

// jquery 
$( document ).ready(function() { 
    
  $('#check_uncheck').click(function() {      
        var chk = $('#check_uncheck').is(':checked'); 
        if (chk==false)
            $('#selectChartType option').prop('selected', false);
        else
            $('#selectChartType option').prop('selected', true);
   });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Check and Uncheck a Multiselect input with a Checkbox</p>
  <input type="checkbox" name="check_uncheck" id="check_uncheck">
  <div class="none">
    <select  id="selectChartType" name="selectChartType" multiple>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>         
    <select/>
 </div>  
</div>

如何添加checkall并取消选中jquery multiselect的所有选项？

5 个答案: