介绍

复选框列表对于允许用户在选择框中选择多个选项很有用。但在这种情况下，可以通过按住控制（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

选择所有选项的多选复选框列表或复选框下拉列表相关推荐

jquery 将下拉框重置_select下拉框之默认选项清空
最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢? 思路: 1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除. 2.当没有 ...
单选/复选框中点击文字能选择该选项
4.单选/复选框中点击文字选择该选项--软设问题总结系列为了提高用户体验,在单选/复选框中,点击文字选择相应选项这一操作是必不可少的. 因为单选/复选框的操作都差不多,所以本文以单选框作为例子说明: ...
php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择在jQuery中,选中checkbox通用的两种方式 ...
在DataGrid中选择,确认,删除多行复选框列表
在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid ...
单个form表单内，不同情况显示的不同选项的单选框或多选框的情况下，判断单选框是否存在未选择一个选项情况，并进行提示。
单个form表单内,根据不同条件情况显示的不同选项的单选框,判断单选框是否存在未选择一个选项情况,并进行提示. 开始: 开始时候,直接把所有情况下的单选框选项用if(!(选项1 已选)&&a ...
JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
html 复选框不能编辑,javascript-jqGrid-复选框编辑无法编辑所选行
在我的jqGrid中,我有一个复选框,该复选框也可用于编辑,即用户可以单击该复选框,并且该复选框的值将在数据库中更新.很好但是,当我单击复选框时,如果再次尝试单击它,则什么也没有发生.该行不会保存.理 ...
axure实现复选框全选_Axure RP实例教程：全选与取消全选效果
原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...
html5 多选框控件,复选框和单选框都属于控件吗
单选框和复选框的区别是什么? 单选框和复选框的区别是什么? 详细一点-. (1)复选框可以允许你选择多个设置,而单选框则允许你选择一个设置: 这两个选框的区别是一个通过用圆圈表示,一个通过用方框表示. ...

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

介绍

现场演示

使用代码

将选择转换为多选复选框

选择所有选项的多选复选框列表或复选框下拉列表相关推荐

最新文章

热门文章