2021-05-05

全选框
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： jquery
作者：黄富健
撰写时间：2021/5/5
注意看红色箭头，共有4个步骤，按顺序操作下去

一、下图是我做的全选框的效果图

1.当用户勾选全选的复选框的时候，其余的复选框就会勾选。还有当用户把其余的勾选框都勾选上了，全选的复选框也会随着而勾选上。

二、HTML部分

1.设置一个类名为box的div来包裹a标签，a标签中再包裹一个input标签。给全选框预先设置好一个类名为checkAll，在给其他的单选框设置为类名为input

三、CSS部分

1.首先设置通配符来初始化margin和padding。给box设置宽度200px、高度200px、上边距200px、水平居中显示。给a标签设置为块级元素、宽（width）50px、高（height）50px、（text-align）文字靠右、（text-decoration）去除a标签的下划线、（color）颜色设置#333

四、JQuery部分

1、刚开始我预先设置好了全选框的类名为checkAll，我们首先给类名为checkAll的input绑定一个change事件。
2、我进行对类名为checkAll的input标签进行判断它的checked这个属性，checked这个属性为true为勾选上了，checked为false则为不勾选。当类名为checkAll的input的属性checked为true时，所有的input标签的checked都为true。反之checked为false时，所有的input标签的checked都为false。
3、我预先设置好了其他的单选框的类名为input，进行对类名为input的复选框绑定change事件。
4、进行判断类名为input的复选框被勾选上的长度（length），当长度与类名为input的复选框相等时，选择类名为checkAll的checked的属性设置为true,否则设置为false。

初来乍到，请多多指教，大神勿喷。