下拉菜单嵌套复选框
首先,引入样式和功能的插件
css的插件和js的插件应该放在对应的位置,
此处为了方便一并截图
根据需求编写下拉菜单,
主菜单的label与复选框应该分开放,
因为主菜单label用于的下拉菜单功能,
而主菜单的复选框则是用于绑定列表中的复选框(为后面的功能做准备)。
文本信息绑定复选框有两种方法
方法一:在label里面直接嵌套复选框,
方法二:分开绑定input里面的id与label里面的for只需填写一样的名称就可以完成绑定
两个方法的效果一样(点击文本信息勾选复选框)。
如下是效果图,
点击文本信息会以下拉框的形式弹出对应的列表
点击列表中的文本信息便可完成单选功能。
下拉菜单的样式只需调用引入的插件就能实现,
而复选框的全选功能则需要动手去实现,
给外层的复选框添加单击事件,
方法里获取到外层的复选框的ID与列表里的name,
然后进行判断,
判断外层的复选框的状态是true还是false，
根据外层的复选框的状态,
进行修改对应的列表中复选框的状态
从而完成全选/全取消的效果
如下是效果图,
勾选外层的复选框
列表中对应的选项也会进行勾选,
相反,取消外层复选框的勾选,
列表中的选项也会进行取消…