来源：Ag_persistence 发布时间：2018-11-22 14:11:34 阅读量：1155
Web前端案例_多选练习案例
关于多选框的checked属性以及span标签的innerhtml属性的练习。
1.案例分析
利用多选框的checked属性以及span标签的innerHTML属性实现此案例。
2.实现效果
点击全选框，实现选择框已经选中的变未选中，未选中的变选中，点击计算总价按钮，实现价格的实时更新
3.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
全选:<input type="checkbox" id="all" onclick="checkAll()"/><br />
<input type="checkbox" name="computer" value="2000" />笔记本1 2000元<br />
<input type="checkbox" name="computer" value="2000" />笔记本2 2000元<br />
<input type="checkbox" name="computer" value="2000" />笔记本3 2000元<br />
<input type="checkbox" name="computer" value="2000" />笔记本4 2000元<br />
<input type="checkbox" name="computer" value="2000" />笔记本5 2000元<br />
<input type="checkbox" name="computer" value="2000" />笔记本6 2000元<br />
<input type="button" value="计算总价" onclick="addPrice()" /><span id="price"></span>
</body>
<script>
function checkAll(){
//var all = document.getElementById("all");
var computer = document.getElementsByName("computer");
for (var i=0;i<computer.length;i++) {
if(computer[i].checked){
computer[i].checked = false;
}else{
computer[i].checked = true;
}
}
}
function addPrice(){
var price = 0;
var computer = document.getElementsByName("computer");
var span = document.getElementById("price");
for (var i=0;i<computer.length;i++) {
if(computer[i].checked){
var tPrice = parseInt(computer[i].value);
price += tPrice;
}
}
span.innerHTML = price+"元";
}
</script>
</html>
4.效果截图
5.总结分析
案例实现没有太大的难度，主要就是获取对应的标签对象，利用对象的相关属性加以实现，稍微有点逻辑问题。
---------------------
13450931319
微信登录
QQ登录
微博登录
售前咨询
