JS练习 - 全选

最新推荐文章于 2024-04-02 19:39:43 发布

逸川先生

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量209

点赞数

文章标签： js 练习

本文链接：https://blog.csdn.net/qq_38238041/article/details/86776078

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JS新手练习题，先上个图

HTML代码：

<!DOCTYPE html>
<html lang="en">
<!--
  需求：
    1.点击全选checkbox或者全选按钮 - 全选
    2.点击全不选 - 全不选
    3.点击反选 - 反选
    4.点击提交 - alert出来就OK
    5.选择爱好，如果全部都选了，全选checkbox选中
    6.全选状态下，取消选择某一项，全选checkbox不选中
    大概就这么多
 -->
<head>
  <meta charset="UTF-8">
  <title>JS练习之全选</title>
  <script src="checkbox.js"></script>
  <link href="checkbox.css" rel="stylesheet" >
</head>
<body>
  <div class="container">
    <div class="content">
      <div class="top">
        <span id="select_text">全选</span>
        <input type="checkbox" id="all" />
      </div>
      <div class="select">
        爱好：
        打豆豆<input name="hobbit" type="checkbox" value="打豆豆">
        写代码<input name="hobbit" type="checkbox" value="写代码">
        吃面包<input name="hobbit" type="checkbox" value="吃面包">
        小梨花<input name="hobbit" type="checkbox" value="小梨花">
      </div>
      <div class="btn">
        <span id="select_all">全选</span>
        <span id="select_none">全不选</span>
        <span id="select_rev">反选</span>
        <span id="select_sub">提交</span>
      </div>
    </div>
  </div>
</body>
</html>

JS代码：

window.onload = function(){
  var hobbits = document.getElementsByName('hobbit');
  var selAll = document.getElementById('all');

  // 单击全选按钮
  document.getElementById('select_all').onclick = function(){
    for(var i = 0; i < hobbits.length; i++){
      hobbits[i].checked = true;
    }
    selAll.checked = true;
  };

  // 单击全不选
  document.getElementById('select_none').onclick = function () {
    for(var i = 0; i< hobbits.length; i++){
      hobbits[i].checked = false;
    }
    selAll.checked = false;
  };

  // 单击反选
  document.getElementById('select_rev').onclick = function () {
    for(var i = 0; i< hobbits.length; i++){
      hobbits[i].checked = !hobbits[i].checked;
    }
    checkAll();
  };

  // 单击提交
  document.getElementById('select_sub').onclick = function () {
    for(var i = 0; i< hobbits.length; i++){
      if(hobbits[i].checked){
        alert(hobbits[i].value);
      }
    }
  };

  // 单击全选checkbox，改变下边所有checkbox的状态和自身的文字
  selAll.onclick = function () {
    for(var i = 0; i< hobbits.length; i++){
      hobbits[i].checked = selAll.checked;
    }
    var text = selAll.checked ? "取消" : "全选";
    document.getElementById('select_text').innerHTML = text;
  };

  // 单击每一个checkbox的时候都要校验一下
  for(var i = 0; i < hobbits.length; i++){
    hobbits[i].onclick = checkAll;
  }

  // 遍历所有的hobbits，如果全选了，全选checkbox也全选
  function checkAll(){
    selAll.checked = true;
    for(var i = 0; i < hobbits.length; i++){
      if(!hobbits[i].checked){
        selAll.checked = false;
        break;
      }
    }
  }
};

CSS代码（就懒得调了）：

*{
  margin: 0;
  padding: 0;
}

span{
  border: 1px solid darkolivegreen;
  padding: 3px 8px;
}
span:hover{
  cursor: pointer;
}

逸川先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习 - 全选

JS新手练习题，先上个图HTML代码： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;!-- 需求： 1.点击全选checkbox或者全选按钮 - 全选 2.点击全不选 - 全不选 3.点击反选 - 反选 4.点击提交 - alert出来就OK 5.选择爱好，如果全部都选了，全选che...
复制链接

扫一扫