在线选课案例—通过js实现全选，全不选和多选效果。顺便谈谈理解的半吊子flag这个变量

最新推荐文章于 2023-02-01 20:55:03 发布

何迟

最新推荐文章于 2023-02-01 20:55:03 发布

阅读量335

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42036616/article/details/83715346

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要点：

1.首先分为两个业务逻辑的模块，首先全选/取消全选的按钮会的选中的状态或者没有选中，他的返回值是Boolean类型，也就是说通过通过这个通过全选按钮将其Boolean类型的值，通过循环赋值给全选框下面所有的单选按钮

2.再单选按钮执行之前，将所有的单选按钮状态做一次判断，判断是否存在一个没有选中的状态的按钮，如果有立即停止循环，并将结果返回给flag，作为多选框不会被选中的标志。flag这个变量，java的程序设计中，经常使用。一般来说，只有程序的状态是不明确的，或者需要用户交互操作的情况下，通过设置一个flag变量来作为标致再合适不过。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
	<div class="wrap">
	  <table>
	    <thead>
	    <tr>
	      <th>
	        <input type="checkbox" id="j_cbAll"/>
	      </th>
	      <th>课程</th>
	      <th>学分</th>
	    </tr>
	    </thead>
	    <tbody id="j_tb">
	    <tr>
	      <td>
	        <input type="checkbox"/>
	      </td>
	      <td>node</td>
	      <td>5</td>
	    </tr>
	    <tr>
	      <td>
	        <input type="checkbox"/>
	      </td>
	      <td>java</td>
	      <td>6</td>
	    </tr>
	    <tr>
	      <td>
	        <input type="checkbox"/>
	      </td>
	      <td>c#</td>
	      <td>4</td>
	    </tr>
	    <tr>
	      <td>
	        <input type="checkbox"/>
	      </td>
	      <td>python</td>
	      <td>1</td>
	    </tr>

	    </tbody>
	  </table>
	</div>

    <script>
      function my$(id){
      	return document.getElementById(id);
      }
      
      var cbAll = my$("j_cbAll");
      // 全选按钮的复选框
      var cbs = my$("j_tb").getElementsByTagName("input");
      // table下面所有小的复选框

      cbAll.onclick = function(){
      	 for(var i=0; i<cbs.length; i++){
      	 	cbs[i].checked = this.checked;
      	 }
      	 // 当上面全选按钮被点击时，将他的checked状态全部赋值给下面所有的子元素
      };

      for(var i=0; i<cbs.length; i++){
      	cbs[i].onclick = function(){
      		var flag = true;
      		// 全选按钮状态的标志

      		for(var j=0; j<cbs.length; j++){
              if(!cbs[j].checked){
              	flag = false;
              	break;
              	// 每次下面的小选框被选中时，执行循环遇到一个没有被选中的就跳出循环
              }
      		}
      		cbAll.checked = flag;
      	}
      };
      
    </script>
</body>
</html>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在线选课案例—通过js实现全选，全不选和多选效果。顺便谈谈理解的半吊子flag这个变量

要点：1.首先分为两个业务逻辑的模块，首先全选/取消全选的按钮会的选中的状态或者没有选中，他的返回值是Boolean类型，也就是说通过通过这个通过全选按钮将其Boolean类型的值，通过循环赋值给全选框下面所有的单选按钮2.再单选按钮执行之前，将所有的单选按钮状态做一次判断，判断是否存在一个没有选中的状态的按钮，如果有立即停止循环，并将结果返回给flag，作为多选框不会被选中的标志。f...
复制链接

扫一扫