自己的全选功能实现案例

摘要：在生活中常见的购物网页中，在选择商品时常常需要使用全选的功能，而在编写网页的时候可以通过JavaScript实现该部分逻辑，从而实现此功能。（1）创立一个大的div盒子模型，让全选功能在此部分能够实现。在此div盒子中，给以“box”的class名，使之后能通过此class名能通过HTML来查找元素。&

在生活中常见的购物网页中，在选择商品时常常需要使用全选的功能，而在编写网页的时候可以通过JavaScript实现该部分逻辑，从而实现此功能。

（1）创立一个大的div盒子模型，让全选功能在此部分能够实现。

在此div盒子中，给以“box”的class名，使之后能通过此class名能通过HTML来查找元素。

<div class="box">
</div>

通过css样式，给予此div相应的样式。

.box {width: 120px;height: 250px;border:1px solid #000;border-radius:
      7px;padding: 20px 10px;margin: 50px auto;background-color: #ccc;}

（2）在大的div盒子中，先创立一小的div盒子，让全选的部分的功能在这个div之中实现。

在此div中，给一input框，类型名为“checkbox”，给一id名为“checkall”使之后能通过此id名能通过HTML来查找元素，再给一单机此对象时调用事件的事件语柄onclick能和JavaScript中的函数结合起来使用。再input框下面，给一lable标签，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

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

通过css样式，给予此div相应的样式。

.box div{border-bottom: 1px dotted #000;padding-bottom: 9px;}

（3）创立6个input标签于小div内容之下

这些input标签类型为“checkbox”，其name值为“item[]”，之后给与内容和换行符，在css内部对input的样式进行修改。

		<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>

通过css样式，给予此input相应的样式。

.box input{margin: 11px;}

（4）在script标签内给相关的函数，使全选功能的逻辑能够实现

	<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;
				}
			}
		}

注意事项：

（1）在通过此id名或者class名通过HTML来查找元素时，应该注意getElementById和getElementsByName的区别，Id后的Element没有s而Class后有s。

（2）在for循环内再写if语句时，if语句{}内的内容写完要记得写“；”，不然代码可能会出现错误。

（3）在head标签内部记得写上<meta charset="utf-8">，不然有中文时会出现乱码。

批改老师：天蓬老师批改时间：2018-11-18 15:14:23
老师总结：作业完成的非常好，总结也非常认真。继续加油

自己的全选功能实现案例

热门词条