abstract:<!-- 这节课收货颇多 最重要的是学会了查资料 W3C网里面查各标签的属性以及功能以及如何使用。这个应该是最大的收获。<label> 标签为 input 元素定义标注(标记)。checked 规定此 input 元素首次加载时应当被选中。 label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 l
<!-- 这节课收货颇多 最重要的是学会了查资料 W3C网里面查各标签的属性以及功能以及如何使用。这个应该是最大的收获。
<label> 标签为 input 元素定义标注(标记)。
checked 规定此 input 元素首次加载时应当被选中。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
还了解了HTML里面以前模模糊糊所认识的点击事件。今天终于明白是怎么回事了。 按钮绑定。
还有什么呢?
回顾JS字符串操作符 lenght 可以返回字符长度。***.length。原来他们可以在开发中这么用。把以前仅仅是学到,让我以后遇到类似的都会怎么用。今天初一。收获可是不少。
还有获取元素的方法。document.getElementBy**( ).
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选框</title>
</head>
<body>
<style type="text/css">
.box{width: 120px;height: 250px;background: #ccc;border:1px solid rebeccapurple;padding: 5px 10px;margin: 20px auto;}
.box div{border-bottom: 1px solid red;padding-bottom: 10px;}
.box input{margin:8px;}
</style>
<script type="text/javascript">
function checkAll(){
var checkall,item;//声明2个变量
checkall=document.getElementById('checkall') ;//全选 获取ID并赋值给checkall
itme=document.getElementsByName('itme[]');//勾选框 获取name并赋值给item
for (var i = 0; i < itme.length; i++){
if (checkall.checked) {
itme[i].checked=true; //当全选框被选中时,勾选框选中
}else{
itme[i].checked=false;//反之则全不选
}
}
}
</script>
<div class="box">
<div>
<input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label>
</div>
<input type="checkbox" name="itme[]">选项1<br>
<input type="checkbox" name="itme[]">选项1<br>
<input type="checkbox" name="itme[]">选项2<br>
<input type="checkbox" name="itme[]">选项1<br>
<input type="checkbox" name="itme[]">选项1<br>
</div>
</body>
</html>
Correcting teacher:灭绝师太Correction time:2019-02-11 09:18:32
Teacher's summary:初一还在好好学习,你不是大牛还有谁啊,继续保持这个学习劲头加油!