效果图1
图2
代码
<!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>
<script type="text/javascript">
function checkAll(all) {
var count=0;
// 取得所有要选中的商品的多选框
var allPro = document.querySelectorAll("#all_pro_div > input");
for (var i= 0;i < allPro.length;i++) {
allPro[i].checked = all.checked;
count = parseInt(allPro[i].value) + count;
document.querySelector("#resultSpan").value=count;
}
}
function caculate(){
var count = 0;
//空格表示只要在里面的元素都可以，但是>表示两者之间一定要是父子关系，中间隔一层都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
for(var i=0;i<selectPro.length;i++){
/*var selectvalue = document.querySelector("input:checked").value;
count = selectvalue + count;*/
var count = parseInt(selectPro[i].value)+count;
}
document.querySelector("#resultSpan").value=count;
/*非闭合标签（起始标记<span>，结束标记</span>）可以使用innerHTML来赋值。如：div、span。
闭合标签（<input /> 起始和结束都在一个标记内，不能再嵌入其他元素）要使用value来赋值：如input。*/
}
</script>
</head>
<body>
<input type="checkbox" name="all" id="all" οnclick="checkAll(this);" > 全选<br/>
<div id="all_pro_div">
<input type="checkbox" name="product" value="1000" οnclick="caculate()"> 笔记本电脑 1000元 <br/>
<input type="checkbox" name="product" value="2000" οnclick="caculate()"> 笔记本电脑 2000元 <br/>
<input type="checkbox" name="product" value="3000" οnclick="caculate()"> 笔记本电脑 3000元 <br/>
<input type="checkbox" name="product" value="4000" οnclick="caculate()"> 笔记本电脑 4000元 <br/>
<input type="checkbox" name="product" value="5000" οnclick="caculate()"> 笔记本电脑 5000元 <br/>
<input type="checkbox" name="product" value="6000" οnclick="caculate()"> 笔记本电脑 6000元 <br/>
</div>
<input type="button" name="btncount" id="btncount" value="计算" οnclick="caculate()">
总计：<input type="span" name="resultSpan" id="resultSpan">
</body>
</html>
总结：
- //空格表示只要在里面的元素都可以，但是>表示两者之间一定要是父子关系，中间隔一层都不
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
2./*非闭合标签（起始标记<span>，结束标记</span>）可以使用innerHTML来赋值。如：div、span。
闭合标签（<input /> 起始和结束都在一个标记内，不能再嵌入其他元素）要使用value来赋值：如input。*/
document.querySelector("#resultSpan").value=count;
<input type="span" name="resultSpan" id="resultSpan">
3.
这种情况代码：
function caculate(){
var count = 0;
//空格表示只要在里面的元素都可以，但是>表示两者之间一定要是父子关系，中间隔一层都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
for(var i=0;i<selectPro.length;i++){
var selectvalue = document.querySelector("input:checked").value;
count = selectvalue + count;
//var count = parseInt(selectPro[i].value)+count;
console.log(count);
}
document.querySelector("#resultSpan").value=count;
}
原因：1.没有进行类型转换，是字符串字符串相加，结果是加长字符串。2.没有循环加结果，没有加【i】时的值，永远默认第一个
选中的值。
4.
- //空格表示只要在里面的元素都可以，但是>表示两者之间一定要是父子关系，中间隔一层都不
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
2./*非闭合标签（起始标记<span>，结束标记</span>）可以使用innerHTML来赋值。如：div、span。
闭合标签（<input /> 起始和结束都在一个标记内，不能再嵌入其他元素）要使用value来赋值：如input。*/
document.querySelector("#resultSpan").value=count;
<input type="span" name="resultSpan" id="resultSpan">
3.
这种情况代码：
function caculate(){
var count = 0;
//空格表示只要在里面的元素都可以，但是>表示两者之间一定要是父子关系，中间隔一层都不行
var selectPro = document.querySelectorAll("#all_pro_div > input:checked");
for(var i=0;i<selectPro.length;i++){
var selectvalue = document.querySelector("input:checked").value;
count = selectvalue + count;
//var count = parseInt(selectPro[i].value)+count;
console.log(count);
}
document.querySelector("#resultSpan").value=count;
}
原因：1.没有进行类型转换，是字符串字符串相加，结果是加长字符串。2.没有循环加结果，没有加【i】时的值，永远默认第一个
选中的值。
4.
