选择所有选项的多选复选框列表或复选框下拉列表

目录

介绍

现场演示

使用代码

将选择转换为多选复选框

---

介绍

复选框列表对于允许用户在选择框中选择多个选项很有用。但在这种情况下，可以通过按住控制（ctrl）按钮选择多个选项，用户讨厌这个。您可以使用jQuery进行多选复选框下拉列表，而不是使用HTML中的多个属性。

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

现场演示

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

使用代码

我用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' });
});

 

原文地址：https://www.codeproject.com/Tips/5162015/Multi-select-Check-Box-List-or-Checkbox-Dropdown-w