您的位置：首页 > 其它

DOM（二）-13-(示例-全选商品列表)

2015-08-20 17:17 363 查看

<!--
全选商品列表；希望一单击button，右边就显示总金额
-->

<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">

function getSum(){

/*
*想要计算总金额，那么必须知道哪些商品被选中，怎么知道？
*打开DHTML API文档，找到INPUT type=checkbox 元素 | input type=checkbox 对象，其内有如下属性：
*checked：设置或获取复选框或单选钮的状态。
*该值有两种true和false，前者表示已被选中，后者表示未被选中。
*【总之】获取所有的名称为item的复选框。判断checked状态，为true的表示被选中，获取该节点的value进行累加。
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");

for(var x=0;x<collItemNodes.length;x++){

if(collItemNodes[x].checked == true){//验证当前被遍历到的checkbox节点对象是否被选中

sum = sum + parseInt(collItemNodes[x].value);//【切记】用parseInt将String类型转为int
}
}

var sSum = sum +"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor("red");

}

//定义全选功能
function checkAll(node){

/*
*将全选的box的checked状态赋值给所有的itembox的checked。
*/
var collItemNodes = document.getElementsByName("item");
for(var x=0;x<collItemNodes.length;x++){

collItemNodes[x].checked = node.checked;
}
}

</script>
<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>

<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000<br/>

<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>

<input type="button" value="总金额" onclick="getSum()" /><span id="sumid"></span>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航