JQuery+checkbox复选框实现选中自动计算数量金额(含全选、反选功能)
在做网站的购物车功能时,需要让用户自己选择要结算的商品,选择后自动计算选择的数量和商品的价格。效果如下图:
怎么实现这样复选框实现选中自动计算数量金额功能呢?下面学做网站论坛介绍一下实现方法。
HTML代码:
<form action="#">
<label>全选 <input type="checkbox" id="all" style="display:inline-block; vertical-align: text-top;"></label><br>
<label><input type="checkbox" value="880" name="29404">足球</label>
<label><input type="checkbox" value="680" name="3304">爬山</label>
<label><input type="checkbox" value="580" name="4504">听音乐</label>
<label><input type="checkbox" value="480" name="66604">学web</label>
</form>
<div class="choosembs"><div class="choosembscont"><span></span></div></div>
JS代码:
<script src="jquery.js"></script>
<script>
// 全选
$("#all").click(function() {
var status = $(this).prop("checked");
$("input:not(#all)").prop("checked", status);
chText();
})
// 反选
$("input:not(#all)").click(function() {
var a = $("input:not(#all)").length;
console.log(a);
var b = $("input:not(#all):checked").length
console.log(b);
$("#all").prop("checked", a == b);
chText();
})
function chText() {
var ary = [];
$("input:not(#all):checked").each(function() {
ary.push($(this).val());
})
var sumall = 0;
for(var w=0;w<ary.length;w++){
sumall = ary[w]*1+sumall*1;
}
$(".choosembscont span").html('已选择:'+ary.length + '个 ' +'总金额:'+ sumall + '元');
}
</script>
这样就可以自己计算选中的数量,以及选中商品的金额总和了。