用JavaScript编写多个文本框+复选框求和,只有复选框被选择时候才生效,具体可看图

多个文本框+复选框求和,只有复选框被选择时候才生效,。使用doucument.form.name取值,name为一组控件名称。最后结果如图二样式。只能JavaScript... 多个文本框+复选框求和,只有复选框被选择时候才生效,。使用doucument.form.name取值,name为一组控件名称。最后结果如图二样式。只能JavaScript 展开
 我来答
yugi111
2017-11-27 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>RunJS 演示代码</title>
<style>
table{
margin:0 auto;
width:400px;
border-collapse:collapse;
}
th{
background-color:gray;
}
th,td{
text-align:center;
border:1px solid gray;
}
</style>
<script>
var qh=function(){
var ts=document.fm.t;
var sum=0;
for(var i=0;i<ts.length-1;i++){
var ti=ts[i];
var ci=ti.parentElement.nextElementSibling.children[0];
if(ci.checked){
sum+=parseFloat(ti.value);
}
}
ts[ts.length-1].value=sum;
}
</script>
  </head>
<body>
<form name="fm">
    <table>
<tr><th>金额</th><th>是否求和</th></tr>
<tr><td><input type="text" name="t" /></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td><input type="text" name="t"/></td><td><input type="checkbox" /></td></tr>
<tr><td>合计<input type="text" name="t" />元</td><td><input type="button" value="求和" onclick="qh()" /></td></tr>
</table>
 </form>
  </body>
</html>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
ZhangXin777999
2017-11-27 · TA获得超过3168个赞
知道大有可为答主
回答量:2075
采纳率:84%
帮助的人:225万
展开全部

要先获取复选框的集合,然后再遍历,选中的话就进入计算累加。如:

var arr=document.form.name["checkbox"];//这种获取方式很少用了
var amount=0;//总价格
for(var i=0;i<arr.length;i++){
    var ele=arr[i];
    if(ele.checked){//判断是否被选中,被选中就获取前面的输入框,并相加
        var inpEle=ele.parentNode.previousSbiling.firstChild;//获取复选框的父节点的兄弟节点的子节点
        var val=inpEle.value;//输入框的内容
        if(val!=''&& !isNaN(val)){//判断内容是否为数字
            amount=amount+parseFloat(val);
        }
    }
}

我只是提供一个思路,代码不能直接在浏览器运行。如果用jQuery的话,获取复选框或输入框就方便点。

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式