<!--HTML结构-->
<button id="chkAll">全选</button>
<button id="fx">反选</button>
<!-- 1, -->
<li class="li">
<input type="checkbox"> 商品1 单价:<span class="jg">19.99</span>
<button class="jie">-</button>
<!--减-->
<input type="text" class="txt1" value="0">
<button class="jia">+</button>
<!--加-->
<span>小计:</span><span class="xiaoji">0.00</span>
</li>
<!-- 2, -->
<li class="li">
<input type="checkbox"> 商品1 单价:<span class="jg">29.99</span>
<button class="jie">-</button>
<!--减-->
<input type="text" class="txt1" value="0">
<button class="jia">+</button>
<!--加-->
<span>小计:</span><span class="xiaoji">0.00</span>
</li>
<!-- 3, -->
<li class="li">
<input type="checkbox"> 商品1 单价: <span class="jg">39.99</span>
<button class="jie">-</button>
<!--减-->
<input type="text" class="txt1" value="0">
<button class="jia">+</button>
<!--加-->
<span>小计:</span><span class="xiaoji">0.00</span>
</li>
样式课可自行引入
<script src="../day js-18 jQuery/js/jquery.min.js"></script>
大佬勿喷
也有点小bug
//js代码段
$(function () {
// 设置全选
$("#chkAll").click(function () {
// console.log($(".chkAll"));
$("input[type=checkbox]").prop("checked", true);
// 总计
$("P").find("span:eq(1)").text(($("li:eq(0)").find(".xiaoji").text())*1+($("li:eq(1)").find(".xiaoji").text())*1+1*($("li:eq(2)").find(".xiaoji").text()));
// 总数量
$("P").find("span:eq(0)").text(($("li:eq(0)").find(".txt1").val())*1+($("li:eq(1)").find(".txt1").val())*1+1*($("li:eq(2)").find(".txt1").val()));
// console.log($("li:eq(1)").find(".xiaoji").text());
});
// 设置反选
$("#fx").click(function () {
$("input[type=checkbox]").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag)
})
})
// 加
$(".jia").click(function(){
//获取兄弟元素文本框的值
var n=$(this).siblings(".txt1").val();
n++;
$(this).siblings(".txt1").val(n);
var price= $(this).parent().find(".jg").text();
var total= (price * n).toFixed(2);
// console.log(total);
// console.log($(this).parent().find(".xiaoji"));
$(this).parent().find(".xiaoji").html(total);
})
// 减
$(".jie").click(function(){
var n=$(this).siblings(".txt1").val();
if(n==0){
return false;
}
n--;
$(this).siblings(".txt1").val(n);
var price= $(this).parent().find(".jg").text();
var total= (price * n).toFixed(2);
// console.log(total);
// console.log($(this).parent().find(".xiaoji"));
$(this).parent().find(".xiaoji").html(total);
})
//点击input 获取 数量价格
$("li").on("click","input:eq(0)",function(){
console.log($("li:eq(0)").find("input:eq(1)").val());
// 数量
$("p").find("span:eq(0)").text($("li:eq(0)").find("input:eq(1)").val()*1+$("li:eq(1)").find("input:eq(1)").val()*1+$("li:eq(2)").find("input:eq(1)").val()*1);
// 价格
$("p").find("span:eq(1)").text($("li:eq(0)").find(".xiaoji").text()*1+$("li:eq(1)").find(".xiaoji").text()*1+$("li:eq(2)").find(".xiaoji").text()*1);
})
})