具有“全选”选项的多选复选框列表或复选框下拉菜单

• 下载源代码 - 2 KB

引言

复选框列表允许用户在选择框中选择多个选项。但在此情况下，需要按住控制 (ctrl) 按钮才能选择多个选项，用户对此感到厌烦。与其在 HTML 中使用 `multiple` 属性，不如使用 jQuery 创建多选复选框下拉菜单。

这是一个简单的 HTML 控件，带有 jQuery 和 CSS，可以在任何 Web 编程语言中使用。

实时演示

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

Using the Code

我使用 jQuery 编写了一个扩展方法，您可以定义下拉选择控件并调用 CreateMultiCheckBox 方法。

此方法会将您的 select 控件简单地转换为多选 checkbox 列表控件。

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

将选择转换为多选复选框

这里“test”是您的控件 ID，您还可以传递默认选项，例如 width、height 和控件的默认标题。

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

下载

我将 CSS 和 jquery 放在同一页面上，您可以根据您的项目进行分离。完整的下载地址是 TestMultiCheckbox.zip 。

历史

• 2019年7月11日：初始版本