4.28学习笔记 jQuery实现全选、反选、全不选

该效果以前使用原生js已经写过,现在用jq改写! html内容可从前面的文章看到下面是jq代码,写jq代码之前要先看是否引入了jq库

// 定义 inp为true 的数量 默认值为0
let inpCount = 0;
// 封装函数实现反选 全选 全不选
function all(flag) {
	// 循环设置checked的属性值
	for (let i = 0; i < $('.inp').length; i++) {
	// 调用函数传入的值
	$(`.inp`).eq(i).prop('checked', flag);
	$(`#allInp`).prop('checked', flag);
}
	// 判断传入是true 或 false
	//为真 inpCount 的值就是长度
	// 为假就是全不选 值为0;
	flag ? inpCount = $('.inp').length : inpCount = 0;
}
// 第一排全选的点击事件
$('#allInp').click(function () {
	all($(this).prop('checked')); // 传入点击后的布尔值
})
// 第三排全选的点击事件
$('#btn1').click(function () {
	all(true); // 传true
})

// 全不选的点击事件
$('#btn2').click(function () {
	all(false); // 传false
})

// 反选的点击事件
$('#btn3').click(function () {
	// 循环去改变每个复选框的checked的值
	for (let i = 0; i < $('.inp').length; i++) {
	// 取反设置属性
	$(`.inp`).eq(i).prop('checked', !$(`.inp:eq(${i})`).prop('checked'))
}
// 将全局的inpCount 数量改变
	inpCount = $('.inp').length - inpCount;
	//判断值是否为inp的长度
	// 为真 allinp的checked就为真
	// 为假 allinp的checked就为假
	inpCount == $('.inp').length ? $('#allInp').prop('checked', true) : $('#allInp').prop('checked', false)
})
// 给复选框绑定点击事件
$('.inp').click(function () {
// 如果值为真 全局的inpCount++ 
// 如果值为假 全局的inpCount-- 
	$(this).prop('checked') == true ? inpCount++ : inpCount--;
//再次判断 全局inpCount 的数值
//为真 就将allinp的checked的值改为true
//为假 就将allinp的checked的值改为false
	inpCount == $('.inp').length ? $('#allInp').prop('checked', true) : 	$('#allInp').prop('checked', false)
})