<!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>Insert title here</title>
<script type="text/javascript">
var allch;
window.onload=function(){
//Get all items
allch=document.getElementsByName("price");
}
/*
1. Check if all selection status is
true: others are also true
false: others are also false
getElementsByName() plural books need to loop to get all selected objects Objects
hidden in the method body: this current object reference
*/
function selectAll(obj) {
/*
//Get the object according to the id value
//var allch=document.getElementsByName("all");
//var all=document.getElementById("all");
//all.checked;
if(obj.checked) {//Determine whether select all is selected true
//Select all items
for(var i=0;i<allch.length;i++){
allch[i].checked=true;
}
}else{
//Select all items Checked
for(var i=0;i<allch.length;i++){
allch[i].checked=false;
}
}
*/
for(var i=0;i<allch.length;i++){
allch[i] .checked=obj.checked;
}
}
//The implementation of inverse selection
function selectFan(obj){
//Check whether the inverse selection is true/false
//Loop through all
for(var i=0;i<allch.length;i++){
//Loop through all objects and see if they are selected
var res=allch[i].checked;
if(res){//true
allch[i].checked=false;
}else{
allch[i].checked=true;
}
}
}
//calculate the total amount
function getMoney(){
var num=0;//number
for(var i=0;i<allch.length;i++){
//traverse all objects and see if it is selected
var res=allch[i ].checked;
if(res){//true
//Calculate the amount
num+=parseInt(allch[i].value);
}
}
//Let the amount be displayed in the span
//Get the span
var span=document.getElementById("mm");
//Add text between pairs of labels/label
span.innerHTML="<font size='6' color=' red'>"+num+"$</font>";
}
</script>
</head>
<body>
<br>
<input type="checkbox" id="all" onclick="selectAll(this)">全选
<input type="checkbox" id="fan" onclick="selectFan(this)">反选
<br>
<br>
<br>
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="700">700
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="100">100
<img alt="" src="a.png" width="100px"height="100px">
价格:<input type="checkbox" name="price" value="600">600
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="300">300
<br>
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="400">400
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="1400">1400
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="1000">1000
<img alt="" src="a.png" width="100px" height="100px">
价格:<input type="checkbox" name="price" value="500">500
<br>
<br>
<input type="button" value="计算" onclick="getMoney()">
<span id="mm"><font size="6" color="red">0$</font></span>
</body>
</html>