JQ与JS实现全选按钮案例

1、需求
最近写了一个jquery和Js案例，需求是这样的：当我勾上全选按钮的时候下面的复选框也会全部被选中，反之只有有一个复选框没被选中则全选按钮不会被选中。如图：

因为最近再学jquery，顺便巩固一下js基础，所以先是用jquery实现了一遍，然后又用原生js实现了一遍。话不多说，直接上代码。
2、jQuery代码

// 1、jQuery做法：$(function () {//1、当全选框选中的时候 里面的复选框也要全部选中 也就是修改小选框的属性值 prop()$('.j_cbAll').change(function () {//$(this).prop('checked')是获得当前全选框的状态 然后把复选框的状态修改成跟全选框一样$('.j_cbBox,.j_cbAll').prop('checked', $(this).prop('checked'));})//2、当复选框全部选上时  全选框才会选上 只要有一个没选上那么全选框也不选上$('.j_cbBox').change(function () {//.j_cbBox:checked.length:获得当前小选框选中的个数  .j_cbBox:checked返回的是被选中的小选框//  $('.j_cbBox').length：复选框的个数if ($('.j_cbBox:checked').length == $('.j_cbBox').length) {//如果复选框全部选上那么全选按钮也会选上$('.j_cbAll').prop('checked', true);} else {//不选则全选按钮不选上$('.j_cbAll').prop('checked', false);}//console.log($('.j_cbBox:checked').length); //复选框被选中的个数})//console.log($('.j_cbBox').length); //4  小选框的个数})

用jquery方法来做比用原生js来实现方便太多了，不得不感慨一句jquery的强大之处，而element:checked则会返回被勾上的复选框，element:checked.length则会获取到被选中的个数，因此只需要判断个数是否为复选框的长度即可，如果两相等，那么就意味着复选框已经被全部选中，那么就修改全选框的属性checked即可。
2、用原生js实现，与jquery效果一致

 //2、原生js的做法window.addEventListener('load', function () {// alert(11)var j_cbAlls = document.querySelectorAll('.j_cbAll');var j_cbBoxs = document.querySelectorAll('.j_cbBox');//1、全选框影响复选框for (i = 0; i < j_cbAlls.length; i++) {j_cbAlls[i].addEventListener('change', function () {// alert(1111)//循环所有的复选框，让其状态与全选框的一样for (i = 0; i < j_cbBoxs.length; i++) {j_cbBoxs[i].checked = this.checked;}// 让两个全选框都选上 让其状态与全选框一样for (i = 0; i < j_cbAlls.length; i++) {j_cbAlls[i].checked = this.checked;}})}//2、复选框影响全选框for (i = 0; i < j_cbBoxs.length; i++) {j_cbBoxs[i].addEventListener('change', function () {//循环复选框看看是否都已选中var flag = true;  //控制全选按钮for (i = 0; i < j_cbBoxs.length; i++) {//只要有一个复选款未被选中  那么全选框就不会被选中if (!j_cbBoxs[i].checked) {flag = false;}}// 修改当前全选框的状态for (i = 0; i < j_cbAlls.length; i++) {j_cbAlls[i].checked = flag;}})}})

用原生js实现比jQuery略难些，代码量也多了，利用js实现核心在于当复选框全部选中时，让全框款勾上。因此我们需要自定义一个变量flag 去控制全选框的状态，如果复选框全部选中，那么全选框才会被勾上，反之则不会。

JQ与JS实现全选按钮案例相关推荐

html 复选按钮全选,JS实现复选按钮控件全选和批量操作
2.1 准备数据新建普通报表,新建数据库查询数据集 ds1,SQL 语句为:SELECT * FROM Sales 2.2 设计表格如下图设计填报模板的表格样式,其中 A3 单元格的左父格为 B3 ...
js实现全选和反选功能
最近没事做,就用js写了一个复选框选择全选时,下面的按钮也都会选择上,当下面的选框被全选时,全选按钮也会被选中;还实现了一个反选功能,可供大家参考,如果大家有好的建议也可以给我留言,我们一起学习... ...
JS实现全选、反选、不选
JS实现全选.反选.不选效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head><meta charset=" ...
11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格...
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
点击button按钮实现全选_全选按钮的实现及事件的处理
这种全选的效果在后台是很需要的,因为有时候数据很多,如果想删除全部的数据,没有全选按钮岂不是很麻烦,所以很有必要实现这种全选的效果,并执行相关的事件,下面就来看看如何实现先来看看第一种方法: 首先先 ...
点击button按钮实现全选_全选按钮（简单实现）
案例分析 1.当全选按钮选中时,下面的按钮全部点亮,反之全灭.(利用checked) //找到全选按钮和所有单选按钮 var j_cbAll = document.querySelector('#j_ ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
jQuery购物车全选总价案例
分析全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走因为checked是复选框的固有属性,所以利用prop()方法获取和设置该属 ...
Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面先持久化取出来字符串,把字符串编程list.循环list ca ...

JQ与JS实现全选按钮案例

JQ与JS实现全选按钮案例相关推荐

最新文章

热门文章