javascript小案例-----表单全选与取消全选(简单购物车案例)

效果如下:

代码思路:

1. 全选和取消全选
2. 把复选框的checked属性(选中状态) 跟随全选按钮
3. 下面复选框全部选中,上面全选才能选中
4. 给下面所有的复选框绑定事件,每次点击,都要循环查看下面所有的复选框是否有未选中的
5. 如果有一个未选中的,上面全选就不选中

代码如下:

html部分:

比较懒,用的上一个隔行变色案例的表格,那什么有效果就行

		<table border="1" cellpadding="10px" rules="all">
			<thead>
				<tr>
					<th><input type="checkbox" id="all" /></th>
					<th>two</th>
					<th>three</th>
					<th>four</th>
				</tr>
			</thead>
			<tbody id="tb">

				<tr>
					<td><input type="checkbox" /></td>
					<td>第一行</td>
					<td>第一行</td>
					<td>第一行</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>第二行</td>
					<td>第二行</td>
					<td>第二行</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>第三行</td>
					<td>第三行</td>
					<td>第三行</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>第四行</td>
					<td>第四行</td>
					<td>第四行</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>第五行</td>
					<td>第五行</td>
					<td>第五行</td>
				</tr>
			</tbody>
		</table>

javascript部分: 

//获取元素
		var all = document.getElementById("all");
		var checkboxs = document.getElementById('tb').getElementsByTagName('input');

		all.onclick = function() {
			// 得到当前复选框的选中状态,如果是true就是选中,false就是未选中
			// console.log(this.checked);
			for (var i = 0; i < checkboxs.length; i++) {
				checkboxs[i].checked = this.checked;
			}
		}

		        // 给下面所有的复选框绑定事件,每次点击,都要循环查看下面所有的复选框是否有未选中的
		for (var j = 0; j < checkboxs.length; j++) {
			checkboxs[j].onclick = function() {
				// 声明一个变量来控制全选按钮是否被选中
				var flag = true;
				//每次点击下面的复选框都要循环下面的按钮是否被选中

				// 用两个相同的变量j是因为下面这个j包含在函数里面,作用域不同
				for (var j = 0; j < checkboxs.length; j++) {
					//如果里面有一个按钮不被选中的话,那么全选按钮就不被选中
					if (!checkboxs[j].checked) {
						// all.checked=false;
						flag = false;
					}
				}
				all.checked = flag;
			}
		}