1. 程式人生 > >線上選課案例—通過js實現全選,全不選和多選效果。順便談談理解的半吊子flag這個變數

線上選課案例—通過js實現全選,全不選和多選效果。順便談談理解的半吊子flag這個變數

要點:

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>

效果: