全选框案例总结心得

Original 2019-02-05 15:53:01 264
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:初一还在好好学习,你不是大牛还有谁啊,继续保持这个学习劲头加油!

Release Notes

Popular Entries