dhtml--复选框组件

最新推荐文章于 2023-09-12 09:51:31 发布

大z小z

最新推荐文章于 2023-09-12 09:51:31 发布

阅读量426

点赞数

分类专栏： dhtml 文章标签： dhtml

本文链接：https://blog.csdn.net/qq_36171618/article/details/72180081

版权

dhtml 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dhtml--复选框组件</title>
</head>
<body>

<script type="text/javascript">
function getSum(){
var sum = 0;
var collItemNodes= document.getElementsByName("item");
for(var i=0;i<collItemNodes.length;i++){
if(collItemNodes[i].checked){
sum+=parseInt(collItemNodes[i].value);
}
}

//在sum里面显示计算结果
var strSum = sum +"元";
document.getElementById("sumid").innerHTML=strSum.fontcolor("red").bold();
}

function checkAll(node){
var collItemNodes= document.getElementsByName("item");
for(var i=0;i<collItemNodes.length;i++){
collItemNodes[i].checked= node.checked;
}
}

function chk(){
var n=0;
var collItemNodes= document.getElementsByName("item");
for(var i=0;i<collItemNodes.length;i++){
if(collItemNodes[i].checked){
n++;
}
}

var oChkAllNode = document.getElementById("chkAll");
if(n==collItemNodes.length){
oChkAllNode.checked = true;
oChkAllNode.indeterminate=false;
}else if(n==0){
oChkAllNode.checked = false;
oChkAllNode.indeterminate=false;
}else{
oChkAllNode.indeterminate=true;
}
}

</script>
<input type="checkbox" name = "item" value ="3000" οnclick="chk();">笔记本电脑:3000元<br/>
<input type="checkbox" name = "item" value ="2500" οnclick="chk();">台式电脑:2500元<br/>
<input type="checkbox" name = "item" value="2000" οnclick="chk();">手机:2000元<br/>
<input type="checkbox" name = "item" value="1000" οnclick="chk();">相机:1000元<br/>
<input id="chkAll" type="checkbox" οnclick="checkAll(this);">全选  

总金额是: <span id="sumid"></span><br/>
<input type="button" value="统计" οnclick="getSum();">
</body>

</html>