<!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>单选全选转载笔记
Posted hdg-caiqi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单选全选转载笔记相关的知识，希望对你有一定的参考价值。
以上是关于单选全选转载笔记的主要内容，如果未能解决你的问题，请参考以下文章