这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战。
今天使用三种方法为多个标签设置响应事件，我们一起往下看，嘿嘿嘿。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、选项标签区域
2、按钮全选、全不选和反选区域
布局核心html代码如下：
<div class="select">
<div class="content">
<p><input type="checkbox" name="" id="">篮球</p>
<p><input type="checkbox" name="" id="">足球</p>
<p><input type="checkbox" name="" id="">羽毛球</p>
<p><input type="checkbox" name="" id="">乒乓球</p>
</div>
<div class="btn">
<button onclick="checkStatus(0)">全选</button>
<button onclick="checkStatus(1)">全不选</button>
<button onclick="checkStatus(2)">反选</button>
</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
加完样式信息后的布局如下图：
三、Javascript特效
1、获取相关标签对象：选项标签对象，全选、全不选和反选按钮对象
2、绑定响应事件方法一:为每个按钮绑定事件
button[0].addEventListener('click', () => {
for (let i = 0; i < input.length; i++) {
input[i].checked = true;
}
})
button[1].addEventListener('click', () => {
for (let i = 0; i < input.length; i++) {
input[i].checked = false;
}
})
button[2].addEventListener('click', () => {
for (let i = 0; i < input.length; i++) {
input[i].checked = !input[i].checked;
}
})
3、绑定响应事件方法二：封装函数
4、绑定响应事件方法三：标签上绑定响应事件
5、有关勾选选项时，要注意以下三点：
（1）用户勾选复选框。
（2）input标签标有checked属性
（3）js中input对象checked属性为true
