MultiSelect is a MooTools plugin that turns your checkbox set into one single multi-select dropdown menu. MultiSelect is also completely CSS skinnable.
This plugin turns your checkbox set into one single multi-select dropdown menu - it actually moves your checkboxes into multi-select list so that your form is still working just as it was before. No server-side script modification needed!
You can also style MultiSelect the way you want with provided CSS or just replace it with your own. CSS classes can be set via options, so you don't have to change your existing stylesheet.
UPDATE: Now supporting keyboard navigation - it behaves almost like an ordinary HTML select element!
First include MultiSelect javascript file in the head of your document.
<script src="Source/MultiSelect.js" type="text/javascript"></script>
In the body of the document wrap your set of checkboxes within div tag (Div CSS class is required, but can be anything you want. This is the selector used to initialize MultiSelect).
<div class="MultiSelect">
<input type="checkbox" id="box0" name="box[]" value="0" checked="checked" /> <label for="box0">MooTools FTW!</label>
<input type="checkbox" id="box1" name="box[]" value="1" checked="checked" /> <label for="box1">Forge</label>
<input type="checkbox" id="box2" name="box[]" value="2" checked="checked" /> <label for="box2">GitHub</label>
<input type="checkbox" id="box3" name="box[]" value="3" checked="checked" /> <label for="box3">FireFox</label>
<input type="checkbox" id="box4" name="box[]" value="4" checked="checked" /> <label for="box4">Safari</label>
<input type="checkbox" id="box5" name="box[]" value="5" checked="checked" /> <label for="box5">Google Chrome</label>
<input type="checkbox" id="box6" name="box[]" value="6" checked="checked" /> <label for="box6">Opera</label>
<input type="checkbox" id="box7" name="box[]" value="7" checked="checked" /> <label for="box7">IE 6</label>
<input type="checkbox" id="box8" name="box[]" value="8" checked="checked" /> <label for="box8">IE 7</label>
<input type="checkbox" id="box9" name="box[]" value="9" checked="checked" /> <label for="box9">IE 8</label>
</div>
Then add the following javascript
new myMultiSelect = new MultiSelect(".MultiSelect");
And you're done!
This plugin turns your checkbox set into one single multi-select dropdown menu - it actually moves your checkboxes into multi-select list so that your form is still working just as it was before. No server-side script modification needed!
You can also style MultiSelect the way you want with CSS provided with this plugin or just replace it with your own. CSS classes can be set with options, so you don't have to change your existing stylesheet.
new MultiSelect(selector[, options]);
Append another checkbox set to turn it into multi-select dropdown. Usefull if you have content added dinamically or if you want to include another checkbox set with different container CSS id/class.
myMultiSelect.append(selector);
<div class="MultiSelect">
<input type="checkbox" id="box0" name="box[]" value="0" checked="checked" /> <label for="box0">MooTools FTW!</label>
<input type="checkbox" id="box1" name="box[]" value="1" checked="checked" /> <label for="box1">Forge</label>
<input type="checkbox" id="box2" name="box[]" value="2" checked="checked" /> <label for="box2">GitHub</label>
<input type="checkbox" id="box3" name="box[]" value="3" checked="checked" /> <label for="box3">FireFox</label>
<input type="checkbox" id="box4" name="box[]" value="4" checked="checked" /> <label for="box4">Safari</label>
<input type="checkbox" id="box5" name="box[]" value="5" checked="checked" /> <label for="box5">Google Chrome</label>
<input type="checkbox" id="box6" name="box[]" value="6" checked="checked" /> <label for="box6">Opera</label>
<input type="checkbox" id="box7" name="box[]" value="7" checked="checked" /> <label for="box7">IE 6</label>
<input type="checkbox" id="box8" name="box[]" value="8" checked="checked" /> <label for="box8">IE 7</label>
<input type="checkbox" id="box9" name="box[]" value="9" checked="checked" /> <label for="box9">IE 8</label>
</div>
<div class="anotherCheckboxSet">
<input type="checkbox" id="box0" name="box[]" value="0" checked="checked" /> <label for="box0">MooTools FTW!</label>
<input type="checkbox" id="box1" name="box[]" value="1" checked="checked" /> <label for="box1">Forge</label>
<input type="checkbox" id="box2" name="box[]" value="2" checked="checked" /> <label for="box2">GitHub</label>
<input type="checkbox" id="box3" name="box[]" value="3" checked="checked" /> <label for="box3">FireFox</label>
<input type="checkbox" id="box4" name="box[]" value="4" checked="checked" /> <label for="box4">Safari</label>
<input type="checkbox" id="box5" name="box[]" value="5" checked="checked" /> <label for="box5">Google Chrome</label>
<input type="checkbox" id="box6" name="box[]" value="6" checked="checked" /> <label for="box6">Opera</label>
<input type="checkbox" id="box7" name="box[]" value="7" checked="checked" /> <label for="box7">IE 6</label>
<input type="checkbox" id="box8" name="box[]" value="8" checked="checked" /> <label for="box8">IE 7</label>
<input type="checkbox" id="box9" name="box[]" value="9" checked="checked" /> <label for="box9">IE 8</label>
</div>
<a id="append" href="#">Append another set</a>
#JS
var myMultiSelect = new MultiSelect('.MultiSelect');
document.id('append').addEvent('click', function(e) {
e.stop();
myMultiSelect.append('.anotherCheckboxSet');
});
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus