现有一个商品选择列表(复选框),HTML代码及效果如下:
<html xmlns=34;http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title></head> <body> <div>商品列表</div> <input type="checkbox" name="item" value="3000" />条记本电脑<br/> <input type="checkbox" name="item" value="3000" />条记本电脑<br/> <input type="checkbox" name="item" value="3000" />条记本电脑<br/> <input type="checkbox" name="all" οnclick="checkAll(this)" />全选<br/> <input type="button" value="总金额:" οnclick="getSum()" /><span id="sumid"></span></body></html>
哀求1:实现checkAll(this)函数。浸染:通过选择/取消选择全选项目能够实现对所有项目的选择/取消。
提示:checked 属性规定在页面加载时该当被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 合营利用。
checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。
哀求2:实现getSum()函数。浸染:统计所选择商品的总价并输出在span区域。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div>商品列表</div> <input type="checkbox" name="item" value="3000"/>条记本电脑<br/> <input type="checkbox" name="item" value="3000"/>平板电脑<br/> <input type="checkbox" name="item" value="3000"/>手机<br/> <input type="checkbox" name="all" id="all" onclick="checkAll(this)"/>全选<br/> <input type="button" value="总金额" onclick="getSum()"/><span id="sumid"></span> <script type="text/javascript"> var item = document.getElementsByName("item"); var all = document.getElementById("all"); function checkAll(){ for(var i=0;i<item.length;i++){//全选 item[i].checked = all.checked; } } function getSum(){ var sum = 0; for(var i=0;i<item.length;i++){//打算 if(item[i].checked){ sum += parseInt(item[i].value); } } var span = document.getElementById("sumid"); span.innerHTML = (new String(sum).fontcolor("red"));//显示 } </script></body></html>