首先设计一个html页面
<html>
<head></head>
<body>
<input type="checkbox" name="shangping" value="1000">笔记本电脑1000元<br/>
<input type="checkbox" name="shangping" value="2000">笔记本电脑2000元<br/>
<input type="checkbox" name="shangping" value="6000">笔记本电脑6000元<br/>
<input type="checkbox" name="shangping" value="8000">笔记本电脑8000元<br/>
<input type="checkbox" name="shangping" value="600">笔记本电脑600元<br/>
<input type="checkbox" name="shangping" value="1500">笔记本电脑1500元<br/>
<input type="checkbox" name="all" >全选<br/>
<input type="button" value="总金额:" ><span id="spanid"></span>
</body>
</html>
接着设计js方法:全选功能
在<head>里面写<script type="type;javascript">
//注意这里的方法名不能为all(),否则不会运行
function aall(){
//document是javascript的内置方法,不需要通过window.document来获取document。
var a=document.getElementsByName("shangping");
var b=document.getElementsByName("all")[0];
for(var i=0;i<a.length;i++){
//checked方法是一个返回布尔值的方法,如果b被选中则把true值赋值给a各个数组元素
a[i].checked=b.checked;
}
}
然后在全选这边往<input>标签添加οnclick="aall()"来触发javascript的方法
完成了全选功能,我们接着做金额总计功能:
function getsum(){
var a=document.getElementsByName("shangping");
var sum=0;
for(var i=0;i<a.length;i++){
//测试商品有没有被选中
if(a[i].checked){
//sum和商品价格相加的时候需要强转
sum+=parseInt(a[i].value);
}
}
//获取spanid节点再通过innerHtml将自己想输出的内容插入到页面
var spannode=document.getElementById("spanid");
spannode.innerHTML=("$"+sum).fontcolor("red");
}
最后呈现简单的功能效果图