master

分支 (2)

管理

管理

master

Devlop

java-script-notes
/
101.全选练习.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    window.onload = function () {
      // 1.全选按钮：点击按钮后，四个多选框全都被选中
      //为id为checkAllBtn的按钮绑定一个单击响应函数
      var checkedAllBtn = document.getElementById("checkedAllBtn");
      checkedAllBtn.onclick = function () {
        //获取四个多选框items
        var items = document.getElementsByName("items");
        //遍历数组
        for (var i = 0; i < items.length; i++) {
          //设置四个多选框变成选中状态
          //通过多选框的checked属性可以来获取或设置多选框的选中状态
          items[i].checked = true;
        }
        var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.checked = true;
      }

      //2.全不选按钮：点击按钮后，四个多选框全都不被选中
      var checkedNoBtn = document.getElementById("checkedNoBtn");
      checkedNoBtn.onclick = function () {
        //获取四个多选框items
        var items = document.getElementsByName("items");
        //遍历数组
        for (var i = 0; i < items.length; i++) {
          //设置四个多选框变成不选中状态
          //通过多选框的checked属性可以来获取或设置多选框的选中状态
          items[i].checked = false;
        }
        var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.checked = false;
      }

      //3.反选按钮：点击按钮后，选中的选框变不选中，不选中的变选中
      var checkedRevBtn = document.getElementById("checkedRevBtn");
      checkedRevBtn.onclick = function () {
        //获取四个多选框items
        var items = document.getElementsByName("items");
        //遍历数组
        for (var i = 0; i < items.length; i++) {
          //判断是否是选中状态（方法一）
          /* if(items[i].checked){
              items[i].checked=false;
          }else {
              items[i].checked=true;
          } */
          items[i].checked = !items[i].checked

        }
      }


      //4.提交按钮：点击后按钮后，弹出选中选框的name和value
      var sendBtn = document.getElementById("sendBtn");
      sendBtn.onclick = function () {
        //获取四个多选框items
        var items = document.getElementsByName("items");
        //遍历数组
        for (var i = 0; i < items.length; i++) {
          //判断是否是选中状态
          if (items[i].checked == true) {
            alert(items[i].value);
          }
        }

      }
      //5.全选/全不选多选框：当它选中时，其他的也选中，当它没选中时，其他的也全部取消
      //为id为checkedAllBox的input绑定单击响应函数
      var checkedAllBox = document.getElementById("checkedAllBox");
      //获取四个多选框items
      var items = document.getElementsByName("items");
      checkedAllBox.onclick = function () {
        //判断多选框是否选中(方法一)
        /*  if(checkedAllBox.checked==true){
             //遍历数组
             for(var i=0;i<items.length;i++){
                 //items里的所有多选框都是选中状态
                items[i].checked=true;
             }
         }else{
             for(var i=0;i<items.length;i++){
                items[i].checked=false;
             }
         } */
        for (var i = 0; i < items.length; i++) {
          // items[i].checked=checkedAllBox.checked;
          /*
              在事件的响应函数中，响应函数是个谁绑定的，this就是谁
          */
          items[i].checked = this.checked;
        }
      }

      //6.如果四个多选框全部被选择的话，全选/全不选也被勾上，如果四个多选框没都选中，checkedAllBox也不应勾上
      var items = document.getElementsByName("items");
      //为四个多选框分别绑定点击响应函数
      for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          checkedAllBox.checked = true;
          // 判断四个多选框是否全选
          for (var j = 0; j < items.length; j++) {
            //只要有一个没选中就不是全选
            if (!items.checked) {
              //一旦进入判断，则证明不是全选状态
              checkedAllBox.checked = false;
              //一旦进入判断。则已证明不是全选，跳出循环
              break;
            }
          }
        }
      }
      var checkedAllBox = document.getElementById("checkedAllBox");

    }

  </script>
</head>
<body>
<form method="post" action="">
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
</body>
</html>