js全选框实战操作

Original 2019-02-19 20:55:42 249
abstract:<!DOCTYPE html><html><head> <title>全选</title> <style type="text/css"> .box{width:120px;height:250px;border :1px solid #000;border-radius: 5px;padding:10p

UO7[D}P2X@L%4D%P$}NRCSF.png

<!DOCTYPE html>

<html>

<head>

<title>全选</title>

<style type="text/css">

.box{width:120px;height:250px;border :1px solid #000;border-radius: 5px;padding:10px 10px;margin: 20px auto}

.box div{border-bottom:1px solid #000;padding-bottom:10px;margin-bottom: 8px}

.box input{margin: 8px}

</style>

<script type="text/javascript">

function checkAll(){

var chackall,item;

checkall = document.getElementById('checkall')//获取全选

item = document.getElementsByName("item[]")//获取下面的勾选框

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

if(checkall.checked){

item[i].checked=true;

}else{

item[i].checked=false;

}

}

}

</script>

</head>

<body>

<div class="box">

<div>

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

</div>

<input type="checkbox" name="item[]">选项1<br>

<input type="checkbox" name="item[]">选项2<br>

<input type="checkbox" name="item[]">选项3<br>

<input type="checkbox" name="item[]">选项4<br>

<input type="checkbox" name="item[]">选项5<br>

<input type="checkbox" name="item[]">选项6<br>


</div>

</body>

</html>


Correcting teacher:韦小宝Correction time:2019-02-20 09:04:04
Teacher's summary:全选这一项功能不管是在前台的页面中还是在后台页面中使用的都很频繁 掌握它是很重要的 没事的时候自己要记得多去练习

Release Notes

Popular Entries