單選全選轉載筆記
阿新 • • 發佈：2018-02-01
scrip style get i++ 自增 elements class 全選 char
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check wonderful</title>
</head>
<body>
<!-- 基本布局-->
<input type="button" value="全選">
<input type="checkbox" id="sure">
<ol id="list">
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
<li><input type="checkbox" id="be"></li>
</ol>
</body>
<script type="text/javascript">
var sure = document.getElementById(‘sure‘);
//獲取id名位sure的元素
var list = document.getElementById("list");//獲取id名位list的元素
var lis = list.getElementsByTagName(‘input‘);//定義一個變量為lis的元素來獲取list內的input標簽
var index =0;
//定義index來計數
sure.onclick = function(){ if(sure.checked ==true){ for (var i = 0; i < lis.length; i++) { lis[i].checked=true; index=10; } }else{ for (var i = 0; i < lis.length; i++) { lis[i].checked = false; index=0; } } } //以上是對全選框做得函數(只要sure被點擊 則全部被選中，否則都不選中。即sure可控制所有按鈕的被選擇狀態) for (var i = 0; i < lis.length; i++) {//獲取一下i的範圍 lis[i].onclick = function(){//對每個lis[i]設置一個點擊函數 如果為真 index++（自增1） if(this.checked ==true){ index++; console.log(index);//通過console.log可以實時查看當前index的值 if(index ==lis.length){//當index的值為i(也就是說明ol下面的所有復選框被選中了) sure.checked=true;//全選框將會自動被選中 } }else{ index--; //假如lis[i]沒有被選中 那麽index的值減一 sure.checked=false;//只要是lis[i]沒有全部被選中，sure就默認不被選中 } } }</script></html> 單選全選轉載筆記