JavaScript 功能 小练习 01

购物车全选/全不选功能

HTML：

<table rules="rows">
			<tbody>
				<tr  class="theme">
					<td>
						<input type="checkbox" id="all" value="全选" onclick="check();"/>
						全选
					</td>
					<td>商品图片</td>
					<td>商品详细信息/卖家/联系方式</td>
					<td>价格</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="product" value="1" />
					</td>
					<td>
						<img src="images/list0.jpg" />
					</td>
					<td class="detail">
						哈哈哈哈哈哈啊哈哈哈
						<br />
						hahahahaha
						<br />
						<img src="images/online_pic.gif" />
						<img src="images/list_tool_fav1.gif" />
					</td>
					<td>
						价格
						<br />
						1234.0
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="product" value="1" />
					</td>
					<td>
						<img src="images/list1.jpg" />
					</td>
					<td class="detail">
						哈哈哈哈哈哈啊哈哈哈
						<br />
						hahahahaha
						<br />
						<img src="images/online_pic.gif" />
						<img src="images/list_tool_fav1.gif" />
					</td>
					<td>
						价格
						<br />
						1234.0
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="product" value="1" />
					</td>
					<td>
						<img src="images/list2.jpg" />
					</td>
					<td class="detail">
						哈哈哈哈哈哈啊哈哈哈
						<br />
						hahahahaha
						<br />
						<img src="images/online_pic.gif" />
						<img src="images/list_tool_fav1.gif" />
					</td>
					<td>
						价格
						<br />
						1234.0
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" name="product" value="1" />
					</td>
					<td>
						<img src="images/list3.jpg" />
					</td>
					<td class="detail">
						哈哈哈哈哈哈啊哈哈哈
						<br />
						hahahahaha
						<br />
						<img src="images/online_pic.gif" />
						<img src="images/list_tool_fav1.gif" />
					</td>
					<td>
						价格
						<br />
						1234.0
					</td>
				</tr>
			</tbody>
		</table>

CSS：

table{
				margin-top: 50px;
				width: 730px;
				
			}
			td{
				text-align: center;
				font-size: 14px;
				padding: 10px;
			}
			tr{
				line-height: 25px;
			}
			.theme td{
				font-weight: bold;
				padding: 20px 10px;
			}
			.detail{
				width: 400px;
			}

JavaScript：

window.onload = prepare;

function prepare(){
	var all = document.getElementById("all");
	all.onclick = function (){
		check();
	}
}

function check(){
	var inputs = document.getElementsByName("product");
	for(i = 0;i < inputs.length;i++){
	inputs[i].checked = document.getElementById("all").checked;
	}
}

知识点总结：
1）复选框checkbox有个checked属性，值为true表示选中，值为false表示未选中。
2）使用getElementById()方法，获取具有相同name属性的复选框的数组。
3）为了实现JavaScript与HTML的分离，我写了一个prepare()方法，将check()方法绑定到全选复选框的click事件上。
遗留的问题：
1）表格的每一行应该有个分割线，我暂时使用table本身的rules属性实现，很明显这不合适。所以到底应该如何优雅的创建一条有样式的分割线呢？（在table当中？还是说这个布局本事就是不好的……）。