Multi-select Check Box List or Checkbox Dropdown with Select All Option

• Download source code - 2 KB

Introduction

Check Box list is useful to allow the user to select multiple options in a select box. But in this case, multiple options can be selected by holding down the control (ctrl) button and the user hates that. Instead of using the multiple attributes in HTML, you can use jQuery to make the multi-select checkbox dropdown.

This is a simple HTML Control with jQuery & CSS that you can use in any web programming language.

Live Demo

• https://codepen.io/rajatsansar/pen/NZJMoW

Using the Code

I wrote an extension method using jQuery, you can define your dropdown select control and call CreateMultiCheckBox method.

This method will simply convert your select control into multi-select checkbox list control.

<select id="test">
  <option value="1">American Black Bear</option>
  <option value="2">Asiatic Black Bear</option>
  <option value="3">Brown Bear</option>
  <option value="4">Giant Panda</option>
  <option value="5">Sloth Bear</option>
  <option value="6">Sun Bear</option>
  <option value="7">Polar Bear</option>
  <option value="8">Spectacled Bear</option>
</select>

Convert Select Into Multi Select Checkbox

Here "test" is your control id, you can also pass default options, such as width, height & default title of control.

$(document).ready(function () {
  $("#test").CreateMultiCheckBox({ width: '230px',
             defaultText : 'Select Below', height:'250px' });
});

Download

I put CSS and jquery on the same page, you can separate according to your project. Here is the full download TestMultiCheckbox.zip .

History

• 11^th July, 2019: Initial version