購物車全選/全不選功能

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當中？還是說這個佈局本事就是不好的……）。