javascript 前端 JS jQuery分别实现按钮全选反选功能

一、功能实现

当点击全选按钮，所有的复选框被选中，有一个复选框没被选中时，全选按钮就不会被选中。效果如图：

 二、分析

1.JavaScript实现

① 当点击全选按钮时，所有复选框被选中

② 遍历每一个复选框，添加点击事件，按钮有两种状态，引入两个变量

var flag = true;

③ 遍历每一个复选框，只要有一个没被选中，状态为false,退出循环

④ 所有的复选框都被选中时，全选按钮状态为 true

2.jQuery实现

① 全选按钮点击事件，复选框的状态和全选按钮一致

② 判断被选择的复选框和复选框的长度是否一致，一致表示所有的都被选择了，则全选按钮被选择。反之，全选按钮不被选择。

三、代码

html部分

css部分

JavaScript部分

jQuery部分

四、总结

jQuery比JavaScript省去了遍历的部分，代码精简了很多。实现功能的主要难度在于想到合适的方法，有了合适的方法，代码写起来不会很复杂。

两种状态：flag flag flag flag!!!!!!!!!!

相关文章