jQuery四——复选框全选反选案例
2018-04-06 本文已影响0人
嗷老板
使用jQuery的方法实现复选框的全选反选，并实现勾选商品的价格求和。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//全选
$("#allCheck").click(function(){
$("input[name = 'item']").prop("checked",$(this).prop("checked"));
});
//反选
$("#otherCheck").click(function(){
var list = $("input[name = 'item']");
list.each(function(){
// if($(this).prop("checked")){
// $(this).removeProp("checked");
// }else{
// $(this).prop("checked","checked");}
$(this).prop("checked",!$(this).prop("checked"))
});
});
//求和
$("#sumBtn").click(function(){
var sum = 0;
$("input[name = 'item']").each(function(){
if($(this).prop("checked")){
sum += Number(this.value);
}
});
$("#sumId").html(sum);
});
});
</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" name="all" id="allCheck" />全选<br />
<input type="checkbox" name="all" id="otherCheck"/>反选<br />
<input type="button" value="总金额" id="sumBtn";" /><span id="sumId"></span>
</body>
</html>
