全选和单选
案例分析
- 全选和取消全选做法：让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可
- 当单选全部勾选的时候，全选的选框自动勾选，当失去个别单选选框的时候，全选选框失去勾选
- 最后计算金额的时候，遍历单选框的checked的属性，若为true，则加上价格
注意：修改checked属性时，等号的右边不需要使用引号，否则效果可能会无法显现
在全选和取消全选的代码中，使用的是this.checked，而不使用flag来标记，这样子代码更精简，如果使用flag，那么可能会使用两个for循环
<!DOCTYPE html>
<html>
<head>
<title>全选和单选</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th><input type="checkbox" name="choseAll" id="choseAll"></th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品1</td>
<td class="price">1000</td>
</tr>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品2</td>
<td class="price">20000</td>
</tr>
<tr>
<td><input type="checkbox" name="goodList"></td>
<td>商品3</td>
<td class="price">100</td>
</tr>
</tbody>
</table>
<button>确定</button>
<a>最后总共消费0元</a>
<script type="text/javascript">
var chose_all = document.getElementById('choseAll');
var inputList = document.getElementsByName('goodList');
var price = document.querySelectorAll('.price');
var submit = document.querySelector('button');
var result = document.querySelector('a');
chose_all.onclick = function(){
for (let i = 0; i < inputList.length; i++) {
inputList[i].checked = this.checked;
}
}
flag = false;
for (let i = 0; i < inputList.length; i++) {
inputList[i].onclick = function(){
for (let i = 0; i < inputList.length; i++) {
if(inputList[i].checked == true){
flag = true;
}else{
flag = false;
break;
}
}
chose_all.checked = flag;
}
}
submit.onclick = function(){
let sum = 0;
for (let i = 0; i < inputList.length; i++) {
if(inputList[i].checked == true){
sum += parseInt(price[i].innerText);
}
}
result.innerText = '最后总共消费' + sum + '元';
}
</script>
</body>
</html>
|