复选框全选功能怎么实现

1、首先引入jquery支持，笔者在jquery的基础上实现该功能，没有使用js

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

1、定义1个复选框用于全选，属性name为allSel

2、定义5个复选框用于分选，属性name为select

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

2、功能描述：

1、勾选全选按钮时，下面1-5复选框全部选中；

2、取消勾选全选按钮时，下面1-5复选框全部取消选中

3、依次勾选1-5复选框时，全选按钮自动勾选

4、1-5复选框中有一个被取消勾选时，取消勾选全选按钮

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

1、方法定义在$(document).ready(function(){}）之内，意思就是当页面dom加载完毕时，执行功能定义

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

2、“全选”按钮功能定义：

1、name为allSel的按钮定义点击事件，如果"全选"按钮是选中状态则将所有name为"select"的“分选”按钮checked属性设置为true，反之则设置为false

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

3、"分选"按钮功能定义：

1、给所有name为select的复选框设置点击事件，当点击1-5复选框时，遍历1-5复选框，判断是否全都是选中状态，如果是则将“全选”按钮勾选，反之则“取消勾选”

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />

1、以下是整体代码展示，大家可以更直观的看一下功能定义

" alt="复选框全选功能怎么实现" referrerPolicy="no-referrer" />