下拉菜单嵌套复选框

首先,引入样式和功能的插件

css的插件和js的插件应该放在对应的位置,

此处为了方便一并截图

根据需求编写下拉菜单,

主菜单的label与复选框应该分开放,

因为主菜单label用于的下拉菜单功能,

而主菜单的复选框则是用于绑定列表中的复选框(为后面的功能做准备)。

文本信息绑定复选框有两种方法

方法一:在label里面直接嵌套复选框,

方法二:分开绑定input里面的id与label里面的for只需填写一样的名称就可以完成绑定

两个方法的效果一样(点击文本信息勾选复选框)。

如下是效果图,

点击文本信息会以下拉框的形式弹出对应的列表

点击列表中的文本信息便可完成单选功能。


下拉菜单的样式只需调用引入的插件就能实现,

而复选框的全选功能则需要动手去实现,

给外层的复选框添加单击事件,

方法里获取到外层的复选框的ID与列表里的name,

然后进行判断,

判断外层的复选框的状态是true还是false，

根据外层的复选框的状态,

进行修改对应的列表中复选框的状态

从而完成全选/全取消的效果

如下是效果图,

勾选外层的复选框

列表中对应的选项也会进行勾选,

相反,取消外层复选框的勾选,

列表中的选项也会进行取消…