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

来源：互联网发布：程序员的硬技能编辑：程序博客网时间：2024/05/20 18:05
<!--全选商品列表；希望一单击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>
0 0