js|实现商品订单的全选与删除效果(含完整源码)

本博文源于js基础，旨在实现商品订单的全选与删除的效果。代码涉及html+css+js.先看实验效果

实验效果

点击删除第二项

只剩下两个项目

实验步骤

测试用图

右键点击另存存为"nz数字".gjf。例如

书写html代码

试想html代码需要什么，表格布局下的订单，因此表格必须要，哪个“删除选中的商品”占据四列的内容需要注意。因此html代码如下：

<table id="list" border="0">
<caption><h2>我的购物车</h2></caption>
	<tr>
		<th><label><input id="all" type="checkbox" onclick="all_check()"/>全选</label></th>
		<th>商品</th>
		<th>描述</th>
		<th>单价(元)</th>
		<th>数量</th>
	</tr>
	<tr>
		<td><input name="ic" type="checkbox" onclick="single_check()"/></td>
		<td width="200px"><img src="images/nz1.gif"></td>
		<td width="100px"><a>女性服装1</a></td>
		<td>298</td>
		<td>1</td>
	</tr>
	<tr>
		<td><input name="ic" type="checkbox" onclick="single_check()"/></td>
		<td width="200px"><img src="images/nz2.gif"></td>
		<td width="100px"><a>女性服装2</a></td>
		<td>598</td>
		<td>1</td>
	</tr>
	<tr>
		<td><input name="ic" type="checkbox" onclick="single_check()"/></td>
		<td width="200px"><img src="images/nz3.gif"></td>
		<td width="100px"><a>女性服装3</a></td>
		<td>398</td>
		<td>2</td>
	</tr>
	<tr>
		<td colspan="4"><a href=javascript:removeRow(); class="sc"></span>
		删除选中的商品</a>
		</td>
		<td><button id="tj">提交订单</button></td>
	</tr>
</table>

书写css代码

没有多少需要设置，仅仅需要颜色/宽度/盒子大小/字体居中

table {
	width: 600px;
	background-color: #d9ffdc;
	text-align: center;
}
th {
	background-color: #00a40c;
	color: #fff;
	padding: 5px;
}
td {
	border-bottom: 1px dashed #817865;
}
.sc {
	text-align: center;
	margin-left: -340px;
}

书写js代码

js代码最复杂，一不小心看不到效果，大家的心情瞬间就被浇灌了。我们先把业务分析完整再写代码，

• 首先我们想实现的功能是点击“全选”下面按钮都被选中。点击所有下边按钮，上边的“全选按钮”全选被选中。
• 点击删除，跳出对话框询问情况，然后删除。
• 鼠标移动来移动去，会变颜色

就这几个业务逻辑。然后嘞开始码代码，代码就会变得清晰

<script>
	var all = document.getElementById("all");
	function all_check() {
		var oInput = document.getElementsByName("ic");
		for(var i =0;i<oInput.length;i++)
			oInput[i].checked = all.checked;
	}
	function single_check() {
		var oInput = document.getElementsByName("ic");
		var j = 0;
		for(var i = 0;i<oInput.length;i++)
			if(oInput[i].checked)
				j++;
			if(j==oInput.length)
				all.checked = true;
			else 
				all.checked = false;
	}
	function removeRow() {
		var cheObj = document.getElementsByName("ic");
		var taObj = document.getElementById("list");
		if(confirm("确定要删除吗？"))
			for(var k = 0;k<cheObj.length;k++) {
				if(cheObj[k].checked) {
					taObj.deleteRow(k+1);
					k = -1;
				}
			}
			document.getElementById("all").checked = false;
	}	
	var taObj = document.getElementById("list");
	for(var k = 0;k<taObj.rows.length;k++) {
		taObj.rows[k].onmouseover =function() {
			this.bgColor = "#ddd";
		}
		taObj.rows[k].onmouseout =function() {
			this.bgColor = "#d9ffdc";
		}
	}
</script>

点击运行，收获喜悦。

总结

本篇博文基于一个生活中的商品订单进行讲解，然后给出了如何实现全选和删除，如果大家不适应这些复杂的风格，可以参考这篇博文
1个复选框案例破解js全(反)选与不选原理之道这篇博文将全选、反选、全不选都做了一一模拟，如果大家课后有时间自己再做拓展尝试，方能将技能有的放矢！技法之妙，存乎一心！