jQuery实现购物车

/*
? ? ? ? 描述：
? ? ? ? ? ? 1.点击减号，input值自减，更新小计，更新总计
? ? ? ? ? ? 2.点击加号，input值自加，更新小计，更新总计
? ? ? ? ? ? 3.点击全选 设置li中的复选框按钮状态都为被选中状态
? ? ? ? ? ? 4.点击反选 本来被选中的复选框设为未选中，未选中的设为选中
? ? ? ? ? ? 5.点击每一个复选按钮，更新总计
? ? ? ? ? ? 6.函数getAll用于设置总计
*/

<div>
? ? ? ? <button>全选</button><button>反选</button>
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 单价 <i>9.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小计: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 单价 <i>19.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小计: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 单价 <i>99.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小计: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <input type="checkbox" name="" id="">
? ? ? ? ? ? ? ? 商品1 单价 <i>999.99</i>
? ? ? ? ? ? ? ? <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
? ? ? ? ? ? ? ? 小计: <span>0.00</span>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <p>一共0件商品, 共计 0.00 元</p>
</div>

<script src="http://9i0i.com/pic.php?p=js/jquery.js"></script>

$('.cut').click(function () {
? ? ? ? // 获取对应输入框的值
? ? ? ? var num = $(this).next(':text').val();
? ? ? ? // console.log(num);
? ? ? ? if (num > 0) {
? ? ? ? ? ? // 自减
? ? ? ? ? ? num--;
? ? ? ? }
? ? ? ? // 更新输入框的值
? ? ? ? $(this).next(':text').val(num);
? ? ? ? // 小计
? ? ? ? var add = Number($(this).prev().text() * num).toFixed(2);
? ? ? ? $(this).nextAll('span').text(add);
?
? ? ? ? getAll(); // 总计
? ? });?

$('.add').click(function () {
? ? ? ? // 获取对应输入框的值
? ? ? ? var num = $(this).prev().val();
? ? ? ? // 自加
? ? ? ? num++;
? ? ? ? // 更新输入框的值
? ? ? ? $(this).prev().val(num);
? ? ? ? // 小计
? ? ? ? var add = Number($(this).siblings('i').text() * num).toFixed(2);
? ? ? ? $(this).nextAll('span').text(add);
?
? ? ? ? getAll(); // 总计
?
? ? });

?$('button').eq(0).click(function () {
? ? ? ? // 所有的复选按钮的都选中
? ? ? ? $(':checkbox').prop('checked', true);
?
? ? ? ? getAll(); // 总计
? ? });

$('button').eq(1).click(function () {
? ? ? ? // 遍历每一个复选框
? ? ? ? $(':checkbox').each(function (i, v) {
? ? ? ? ? ? // console.log(!v.cheacked);
? ? ? ? ? ? // $(v).prop('checked',!v.checked)
? ? ? ? ? ? // checked属性进行取反
? ? ? ? ? ? v.checked = !v.checked;
? ? ? ? });
?
? ? ? ? getAll(); // 总计
? ? });

$(':checkbox').click(getAll);

function getAll() {
? ? ? ? // 定义变量，分别用于存总数和总价
? ? ? ? var sum = 0;
? ? ? ? var allnum = 0;
? ? ? ? // 所有被选中的复选框
? ? ? ? var t = $(':checkbox:checked').each(function (i, v) {
? ? ? ? ? ? // console.log(Number($(v).nextAll('span').text()));
? ? ? ? ? ? // 所有被选中的复选框小计的总和
? ? ? ? ? ? sum += Number($(v).nextAll('span').text());
? ? ? ? ? ? //所有被选中的复选框的输入框值的总和
? ? ? ? ? ? allnum += Number($(v).nextAll(':text').val());
? ? ? ? });
? ? ? ? // 设置p的内容
? ? ? ? $('p').html('<p>一共' + allnum + '件商品, 共计 ' + sum.toFixed(2) + ' 元</p>');
? ? }