jquery 判断是否有类名_jQuery实现购物车小案例

做的一个关于购物车的小案例，用表格实现，欢迎指正！

功能包括以下几点：

1、商品全选、全不选

2、选择删除商品

3、清空购物车

4、已选择多少件商品

5、选中商品总价

6、商品数量加减

7、删除商品

记得引入jQuery插件！

记得引入jQuery插件！

记得引入jQuery插件！

重要的事情说三遍

布局：

<table cellspacing='0' cellpadding='0'>

<thead>

<tr>

<th>

<input type="checkbox" id="all">全选

</th>

<th>商品</th>

<th>单价</th>

<th>数量</th>

<th>小计</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<input type="checkbox" class="dx" checked="checked">

</td>

<td>

<img src="./img/l.jpg" alt="">

苹果

</td>

<td>999</td>

<td>

<input type="button" value="-" class="jian">

<input type="text" class="txt" value="1">

<input type="button" value="+" class="jia">

</td>

<td>999</td>

<td><a>删除</a></td>

</tr>

<tr>

<td>

<input type="checkbox" class="dx">

</td>

<td>

<img src="./img/l.jpg" alt="">

菠萝

</td>

<td>999</td>

<td>

<input type="button" value="-" class="jian">

<input type="text" class="txt" value="1">

<input type="button" value="+" class="jia">

</td>

<td>999</td>

<td><a>删除</a></td>

</tr>

<tr>

<td>

<input type="checkbox" class="dx">

</td>

<td>

<img src="./img/l.jpg" alt="">

香蕉

</td>

<td>999</td>

<td>

<input type="button" value="-" class="jian">

<input type="text" class="txt" value="1">

<input type="button" value="+" class="jia">

</td>

<td>999</td>

<td><a>删除</a></td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="6">

<input type="button" value="选中删除" id="xs">

<input type="button" value="清空购物车" id="qk">

已选择<strong>1</strong>件商品

总价：<strong>999</strong>

</td>

</tr>

</tfoot>

</table>

样式：

table,thead,table,tr,td,th{

margin: 0;

padding: 0;

}

table,tbody,thead,tr,th,td{

border: 1px solid;

text-align: center;

}

td{

padding: 3px;

}

td>img{

width: 80px;

height: 50px;

}

.jia{

padding: 5px;

}

.jian{

padding: 5px;

}

.txt{

width: 100px;

height: 25px;

}

js逻辑代码：

// 全选按钮

$('#all').click(function () {

// 当前复选框的属性

var status = $(this).prop('checked')

// 选中的属性

$('.dx').prop('checked', status)

zj() //调用总价

})

//判断当前的全选按钮是否选中

function check_all() {

//获取class为dx的所有的复选框的个数

var dx = $(".dx").length;

// 获取选中的复选框的个数

var dx1 = $(".dx:checked").length;

if (dx == dx1) {

$("#all").prop("checked", true);

} else {

$("#all").prop("checked", false);

}

}

//给按钮绑定点击事件，调用全选按钮的判断条件

$(".dx").click(function () {

check_all();

zj(); // 总价

})

// 选中删除

$('#xs').click(function () {

// 遍历复选框是否选中

$('.dx').each(function (index, item) {

// 如果复选框属性等于true

if ($(item).prop('checked') == true) {

// 当前元素的父元素的父元素删除

$(this).parent().parent().remove()

}

})

zj() // 总价

})

// 清空购物车

$('#qk').click(function () {

// 删除tbody

$('tbody').empty();

})

// 减

$('.jian').click(function () {

// 获取当前元素的下一个兄弟元素的val值

var num = parseInt($(this).next().val());

num--;

if (num = 1) {

num = 1;

}

// 当前元素的下一个兄弟元素val值是num

$(this).next().val(num)

zj() // 总价

})

// 加

$('.jia').click(function () {

// 获取当前元素的上一个兄弟元素的val值

var num = parseInt($(this).prev().val());

num++;

// 当前元素的上一个兄弟元素的val值为num

$(this).prev().val(num)

zj() // 总价

})

// 删除

$('tr>td>a').click(function () {

// 当前父元素的父元素删除

$(this).parent().parent().remove();

zj() // 总价

})

// 总价

function zj() {

var zj = 0.00; //商品总价

var sl = 0; //选中商品数量

$('.dx:checked').each(function () {

// 单价

var dj = $(this).parent().nextAll().eq(1).text();

// 商品数量

var num = $(this).parent().nextAll().eq(2).children('.txt').val()

// 总价

zj += num * dj;

//数量

sl += parseInt(num);

})

// 选中商品的总数量

$('strong').eq(0).text(sl);

// 总计商品的总价格

$('strong').eq(1).text(zj.toFixed(2));

// 遍历选中商品

$('.dx').each(function () {

// 单价

var dj = $(this).parent().nextAll().eq(1).text();

//商品数量

var num = $(this).parent().nextAll().eq(2).children('.txt').val()

// 总价

var totals = num * dj;

$(this).parent().nextAll().eq(3).text(totals.toFixed(2))

})

}

zj()