JS-全选和反选

<!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>

var allch;
window.onload=function(){
//获取所有商品
allch=document.getElementsByName("price");
}

/*
1.查查全选状态是
true:其他也是true
false:其他也是false
getElementsByName()复数书需要循环获取all全选对象
方法体中影藏的对象:this当前对象引用
*/
function selectAll(obj){
/*
//根据id值获取对象
//var allch=document.getElementsByName("all");
//var all=document.getElementById("all");
//all.checked;
if(obj.checked){//判断全选是否被选中 true
//将商品全部选中
for(var i=0;i<allch.length;i++){
allch[i].checked=true;
}
}else{
//将商品全部选中
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;
}

}

//反选的实现
function selectFan(obj){
//查看反选是true/false
//循环遍历所有
for(var i=0;i<allch.length;i++){
//遍历所有对象并查看是否被选中
var res=allch[i].checked;
if(res){//true
allch[i].checked=false;
}else{
allch[i].checked=true;
}
}
}

//计算总金额
function getMoney(){
var num=0;//number
for(var i=0;i<allch.length;i++){
//遍历所有对象并查看是否被选中
var res=allch[i].checked;
if(res){//true
//计算金额
num+=parseInt(allch[i].value);
}
}

//让金额显示在span中
//获取span
var span=document.getElementById("mm");
//给标签对之间添加文本/标签
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

猜你喜欢