标签:jquery复习 checkbox 学校 部分 min get pre 空气净化器 text
每天记录自己在学校学到的点点滴滴,让每天的生活过的更加充实!加油!
注:本次案例简单实现购物选择的功能!
实现效果:添加部分产品,左边为勾选框,右边为商品和数量选择,数量可以增加或减少,只有复选框勾选的时候,添加产品才可以显示所需金额,下方为商品总价格!
html代码:
<table id="tb1"> <tr> <td>勾选状态</td> <td>商品名称</td> <td>商品价格</td> <td>数量</td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>空调</td> <td class="auto-style1">2400</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>长虹电视</td> <td class="auto-style1">2600</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>小米3</td> <td class="auto-style1">2200</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>BlurAir空气净化器</td> <td class="auto-style1">5000</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> <tr> <td> <input type="checkbox" class="a" /></td> <td>三星显示器</td> <td class="auto-style1">2000</td> <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> </tr> </table> <h3>总价格:<span id="spNumber"></span></h3>
Jquery代码:
<script type="text/javascript"> $(document).ready(function () { $(".sum").click(function () { 添加产品数量 var tdlist = $(this).next("input").val(); 获取文本框数量值 var number = parseInt(tdlist) + 1; 加一 var sum = 0; $(this).next("input").val(number); getSum(); }); $(".min").click(function () { 减少产品数量 var tdlist = $(this).prev("input").val(); if (tdlist > 0) { 数量不能为负 var number = parseInt(tdlist) - 1; 减一 $(this).prev("input").val(number); getSum(); } }); $(".a").click(function () { getSum(); }) function getSum() { 获取产品总金额 var trlist = $("#tb1").find("tr:gt(0)"); var sum = 0; trlist.each(function () { var check = $(this).find("input[type=‘checkbox‘]").prop("checked"); 勾选框为true if (check == true) { var monery = $(this).find(".auto-style1").text(); 获得商品单价 var number = $(this).find("input:text").val(); 选择商品数量 var s = parseInt(monery) * parseInt(number); 相乘 sum += s; } $("#spNumber").text(sum); 赋值 }); } }); </script>
代码到这里就结束啦!后边还会再加一些功能!再接再厉!
标签:jquery复习 checkbox 学校 部分 min get pre 空气净化器 text
原文地址:https://www.cnblogs.com/dcy521/p/10259419.html