js实现全选

原创 2019-06-26 22:24:54 208
摘要:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>全选</title><style type="text/css&q

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>全选</title>

<style type="text/css">

.box{

height:200px;

width:80px;

border:1px solid #ccc;

border-radius:10px;

padding-left:5px;

}

#checkall{

margin-top:10px;

}

[name]{

margin-top:10px;

}


</style>

</head>


<body>

<script type="text/javascript">

function checkAll(){

var checkall,ite;

checkall=document.getElementById('checkall');

ite=document.getElementsByName('ite');

for(var i=0;i<ite.length;i++){

if(checkall.checked){

ite[i].checked=true;

}else{

ite[i].checked=false;

}}}

</script>

<div class="box">

<div>

<input type="checkbox" id="checkall" onclick="checkAll()" /><label for="checkall">全选</label>

</div>

<input type="checkbox" name="ite" />选项1<br />

<input type="checkbox" name="ite" />选项2<br />

<input type="checkbox" name="ite" />选项3<br />

<input type="checkbox" name="ite" />选项4<br />

<input type="checkbox" name="ite" />选项5<br />

<input type="checkbox" name="ite" />选项6<br />

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-06-27 13:10:20
老师总结:全选 的实现方式有很多种, 你这种方案是最普通与常用的

发布手记

热门词条