复选框如果要选中,设置checked=true,取消设置checked=false
全选:通过name属性得到上面所有的复选框对象,遍历集合,将每一个元素的checked设置为true。
反选:原来选中的设置false,原来没选的设置为true。
- 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="300" /> 运动鞋<br />
<input type="checkbox" name="item" value="200" /> 板鞋<br />
<input type="checkbox" name="item" value="3000" /> 笔记本电脑<br />
<input type="checkbox" name="item" value="400" /> 手表<br />
<input type="checkbox" name="item" value="150" /> 厨具<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" />全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
<input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
</body>
</html>
JavaScript代码:
<script>
/*点击全选和全不选的按钮 其他的复选框 应该跟全选框一致*/
function selectAll(){
//点击全选的状态.
//1.获得全选和全不选的状态值 通过checked属性 checked="checked" ==>>html语法
var allCkb = document.getElementById("all");
//checked属性是boolean类型 ==>> javascript语法
//alert(allCkb.checked);
//2.获得其他复选框
var otherCkb = document.getElementsByName("item");
for(var i = 0 ; i<otherCkb.length ; i++){
//全选框的状态赋值给每一个复选框
otherCkb[i].checked = allCkb.checked;
}
}
//点击事件
function reverseSelect(){
//获得其他复选框即可
var otherCkb = document.getElementsByName("item");
//遍历
for(var i = 0 ; i<otherCkb.length ; i++){
otherCkb[i].checked = !otherCkb[i].checked;
}
}
//点击结账
function total(){
//1.获得所有复选框
var otherCkb = document.getElementsByName("item");
var totalPrice = 0 ;
//2.循环判断哪些被选中
for(var i=0;i<otherCkb.length ; i++){
if(otherCkb[i].checked ==true){
//3.选中的价格相加
totalPrice+= parseInt( otherCkb[i].value );
}
}
alert(totalPrice);
}
</script>