<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button name="yes">全选</button>
<button name="no">不选</button>
<button name="not">反选</button>
<hr>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script src="./jquery.min.js"></script>
<script>
const oYes = document.querySelector('[name="yes"]');
const oNo = document.querySelector('[name="no"]');
const oNot = document.querySelector('[name="not"]');
// 全选中
oYes.addEventListener( 'click' , ()=>{
// 隐式迭代
// 对伪数组中的所有单元都进行了属性的设定
$('input').prop( 'checked' , true );
} )
// 全不选
oNo.addEventListener( 'click' , ()=>{
// 隐式迭代
// 对伪数组中的所有单元都进行了属性的设定
$('input').prop( 'checked' , false );
} )
// 反选
// 要逐一获取到到当前标签的属性,在对这个属性的属性值取反 !()
// 将取反的值,赋值给标签本身
oNot.addEventListener( 'click' , ()=>{
// 隐式迭代
// 获取属性值,只会获取第一个标签对象的属性值,不会逐一获取
// 设定属性值,是设定所有的属性值
// console.log($('input').prop( 'checked'));
// 需要使用循环方式来操作
// 使用js的方式先来操作一波
const oIpts = document.querySelectorAll('input');
oIpts.forEach((item)=>{
// 1,通过 $() 将 js的标签对象item 变成 jQuery 的标签对象
// 2,设定 checked 属性的属性值
// 3,属性值是 本身 checked属性值 取反
$(item).prop( 'checked' , !($(item).prop('checked')) );
})
} )
</script>
</body>
</html>