按照课程把全选框做了一遍并且实现功能

原创 2018-12-31 11:31:52 283
摘要:自己的总结:虽然照着老师的代码全部实现功能,但是函数的为什么要这么做还是不很理解,目前先做到熟悉敲代码,不能忘记。代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选框</title><style type="text/cs

自己的总结:虽然照着老师的代码全部实现功能,但是函数的为什么要这么做还是不很理解,目前先做到熟悉敲代码,不能忘记。

代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全选框</title>

<style type="text/css">

.box {width: 260px;height: 300px;border: 1px solid #ccc;margin: 20px auto;border-radiuw: 5px;padding: 5px 10px;}

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

.box input {margin: 8px;}

</style>

<script text="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[]">他的名字是李明<br>

<input type="checkbox" name="item[]">身高175cm<br>

<input type="checkbox" name="item[]">皮肤是黄色<br>

<input type="checkbox" name="item[]">未婚<br>

<input type="checkbox" name="item[]">89年出生的<br>

<input type="checkbox" name="item[]">小名叫铁蛋<br>

<input type="checkbox" name="item[]">长得很帅气<br>

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2018-12-31 16:06:21
老师总结:<input type="checkbox" name="item[]">全选, 重点这个name属性的值: name="item[]", 必须是数组

发布手记

热门词条