JavaScript-全选练习

全选练习

1. 任务

1. 全选按钮
   • 点击按钮以后，四个多选框全都被选中
2. 全不选按钮
   • 点击按钮以后，四个多选框都变成没选中的状态
3. 反选按钮
   • 点击按钮以后，选中的变成选中，没选中的变成选中
4. 提交按钮
   • 点击按钮以后，将所有选中的多选框的 value 属性值弹出
5. 全选/全不选
   • 当它选中时，其余的也选中，当它取消时其余的也取消
6. 全选/全不选和多选框动态绑定
   • 如果四个多选框全都选中，则 checkedAllBox 也应该选中
   • 如果四个多选框没都选中，则 checkedAllBox 也不应该选中

JavaScript-全选练习

2. 步骤

1. 获取四个多选框
2. 获取全选全不选的多选框

//获取四个多选框
var items = document.getElementsByName("items");
//获取全选全不选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");

2.1 #checkedAllBtn 全选按钮

点击按钮以后，四个多选框全都被选中

1. 为 id 为 checkedAllBtn 的按钮绑定一个单击响应函数
2. 遍历 items
3. 通过多选框的 checked 属性可以来获取或设置多选框的选中状态
4. 设置四个多选框变成选中状态
5. 将全选全不选设置为选中

/*
 * 全选按钮
 *  - 点击按钮以后，四个多选框全都被选中
 */
//1.#checkedAllBtn
//为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
   
  //遍历items
  for (var i = 0; i < items.length; i++) {
   
    //通过多选框的checked属性可以来获取或设置多选框的选中状态
    //alert(items[i].checked);

    //设置四个多选框变成选中状态
    items[i].checked = true;
  }

  //将全选全不选设置为选中
  checkedAllBox.checked = true;
};

2.2 #checkedNoBtn 全不选按钮

点击按钮以后，四个多选框都变成没选中的状态

1. 为 id 为 checkedNoBtn 绑定一个单机响应函数
2. 将四个多选框设置为没选中的状态
3. 将全选全不选设置为不选中

/*
 * 全不选按钮
 *  - 点击按钮以后，四个多选框都变成没选中的状态
 */
//2.#checkedNoBtn
//为id为checkedNoBtn绑定一个单机响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
   
  for (var i = 0; i < items.length; i++) {
   
    //将四个多选框设置为没选中的状态
    items[i].checked = false;
  }
  //将全选全不选设置为不选中
  checkedAllBox.checked = false;
};

2.3 #checkedRevBtn 反选按钮

点击按钮以后，选中的变成选中，没选中的变成选中

1. 将 checkedAllBox 设置为选中状态
2. 判断多选框的状态
   • 证明多选框选中，则设置为没选中状态
   • 证明多选框没选中
3. 判断四个多选框是否全选
   • 只要有一个没选中则不是全选
   • 一旦进入判断则证明不是全选状态
4. 将 checkedAllBox 设置为没选中状态
5. 一旦进入判断，则已经得出结果，不用继续执行循环
6. 在反选时也需要判断四个多选框是否全都选中

/*
 * 反选按钮
 *  - 点击按钮以后，选中的变成选中，没选中的变成选中
 */
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function ()