jQuery Plugin For Bootstrap Dropdown With Checkboxes - dropdownCheckboxes

File Size: 6.77 KB
Views Total: 16905
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Bootstrap Dropdown With Checkboxes - dropdownCheckboxes

jQuery dropdownCheckboxes is a jQuery plugin for Bootstrap that helps you create a multi-select dropdown list with checkboxes using Bootstrap styles. When initializing, a hidden input is created within the div, with the "data-name" value as the name of the input. That way, these can be used as any other form input. When the values are saved, the value of the hidden is set to a JSON array of all ticked checkbox values. Note that the checkboxes can be pre-checked on pageload, and the initializer will activate the UI appropriately.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework to work properly.

<script src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

2. Download and include the jQuery dropdownCheckboxes plugin's files in the webpage.

<link rel="stylesheet" href="dropdownCheckboxes.min.css">
<script src="dropdownCheckboxes.min.js"></script>

3. Create the dropdown list:

<form class='myform'>
  
  <div class="dropdown cq-dropdown" data-name='statuses'>
    <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Status <span class="caret"></span> </button>
    <ul class="dropdown-menu" aria-labelledby="dropdown1">
      <li>
        <label class="radio-btn">
          <input type="checkbox" value='new' checked>
          jQuery </label>
      </li>
      <li>
        <label class="radio-btn">
          <input type="checkbox" value='pending'>
          JavaScript </label>
      </li>
      <li>
        <label class="radio-btn">
          <input type="checkbox" value='hold'>
          AngularJS </label>
      </li>
      <li>
        <label class="radio-btn">
          <input type="checkbox" value='published' checked>
          React Native </label>
      </li>
      <li>
        <label class="radio-btn">
          <input type="checkbox" value='spiked' checked>
          Vue.js </label>
      </li>
      <li class='text-center'>
        <button type='button' class='btn btn-xs btn-default clear close-dropdown' value='Clear'>Clear</button>
        <button type='button' class='btn btn-xs btn-default save' value='Save'>Save</button>
      </li>
    </ul>
  </div>
</form>

4. Initialize the plugin and we're done.

$('.cq-dropdown').dropdownCheckboxes();

This awesome jQuery plugin is developed by creativecirclemedia. For more Advanced Usages, please check the demo page or visit the official website.