前端经典JQuery案例1--按钮全选

一.准备

这个案例用的是JQuery技术.所以需要先导入JQuery文件.

在准备一个下图的按钮样式

 

二.分析

 1.功能分析

1).点击全选按钮,下面的按钮都会变成选中状态,再次点击全选按钮,下面三个变成未选中状态

2).点击下面的按钮会变成选中状态,当三个按钮全部选中时,全选按钮会变成选中状态

3).当全选被选中时,取消任意一个按钮全选都会取消选中.

2.绑定事件

 对于复选框的点击可以绑定点击事件也可以绑定change事件.change事件就是当状态发生改变时触发的事件.

3.功能实现

(1).点击全选按钮,下面的按钮都会变成选中状态,再次点击全选按钮,下面三个变成未选中状态简而言之就是下面的按钮会随着全选按钮的变化而变化.代码如下:

 (2).第二个功能和第三个功能可以和在一起,下面复选框的状态每发生一次改变都会遍历一遍所有被选中的复选框,如果数量等于3则全选按钮会被选上.代码如下:

 这样全选反选的功能就基本实现了.

三.回顾

 1.这个案例核心技术是jquery,当然现在主流的vue和react技术也能实现,js原生也能实现,在学习案例的时候可以去试着用各种不同的方法去实现一个案例.

2.改案例绑定的事件是change事件,change事件和click事件都可以使用.

3.因为是复选框,所以用到了jquery中的prop(),方法,这个方法有俩个参数,prop('checked',true),第一个参数表示元素的属性,第二个参数是元素的属性值,在jquery中还有一个方法和他很相似,就是attr(),

4.我们在获取被选中的复选框时用到的是$('ckbox:checked'),这种写法可以直接拿到所有被选中的复选框,返回的是一个数组.如果运用不熟练也可以使用each方法.

如果对你有帮助,可以点赞关注一下.