user3136030 user3136030 - 4 months ago 19
HTML Question

How to add checkall and uncheck all option for jquery multiselect?

I have added jquery multiselect property for my dropdown. Dropdown is like this,

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


I am initializing multiselect like this,

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


I want 2 options inside the dropdown saying checkall and uncheckall. I know there is a option,

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


But i don't know how to add it in html. Please help me

Answer

You should use something like this for jquery

JQuery

$(document).ready(function(){

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

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

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

     });
});

And add button in HTML as

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

you can see Demo here.

and I guess you are using some of multi-select plugin then you might want to check their doc or let us know which plugin you are using to help you more with that.