JS实现单选、多选、全选、反选

时间:2021-07-16 10:11:50

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选反选问题</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="choose.js"></script>
</head>

<body>
<div >商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />

<input type="checkbox" id="all1" name="all""/>全选<br />
<input type="
checkbox" id="all2" name="all""/>反选<br />

<span >总金额:</span>
<span id="
sumId">
</span>
</body>
</html>

choose.js

$(function(){
Buy();
})

function Buy(){
//遍历复选框
$("input[name=item]").each(function(){
$(this).click(function(){
count();
chooseAll();
})
})
//全选
$("#all1").click(function(){
$("input[name=item]").each(function(){
$(this).attr("checked", "checked");
})
$("#all2").attr("checked", "");
count();
})
//反选
$("#all2").click(function(){
$("input[name=item]").each(function(){
if(this.checked){
$(this).attr("checked", "")
}else{
$(this).attr("checked", "checked")
}
$("#all1").attr("checked", "");
chooseAll();
count();
})

})
}
//统计总金额
function count(){
var checked = $("input[name=item]:checked");
var all = $("input[name=item]");
var sum = 0;
for(var i = 0; i < checked.length; i ++){
sum += checked[i].value/1;
}

$("#sumId").html(sum + "元");
}
//判断是否为全选
function chooseAll(){
var checked = $("input[name=item]:checked");
var all = $("input[name=item]");
if(checked.length == all.length){
$("#all1").attr("checked", "checked");
$("#all2").attr("checked", "");
}
}