javascript全选

原创2018-11-27 00:38:0560
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>javascript全选</title><style type="text/css">.checkall{width: 120px;height: 200px;bo

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>javascript全选</title>

<style type="text/css">

.checkall{width: 120px;height: 200px;border: 1px solid #000; border-radius: 5px;

padding: 20px 20px;margin: 20px auto;}

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

input{margin: 8px;}

</style>

<script type="text/javascript">

function checkAll() {

var checkall,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>

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

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

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

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

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

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

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


</div>

</body>

</html>


批改老师:灭绝师太批改时间:2018-11-27 09:09:07
老师总结:写出来简单,但是要确保每一条语句的用意都弄懂奥!可以加上适当注释

发布手记

热门词条