购物车功能:使用jQuery实现购物车全选反选,单选,商品增删,小计等功能

发布时间:2019-01-12 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了购物车功能:使用jQuery实现购物车全选反选,单选,商品增删,小计等功能脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果图:

html:

模拟购物车功能-jq
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;table </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="table"</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="checkAll"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt; checked  </span><span style="color: #0000ff"&gt;/></span>全选<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>删除<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>商品名称<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>商品价格(元)<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>数目<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>小计(元)<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>操作<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;th</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="check"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt;  checked </span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>商品名称1<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="price"</span><span style="color: #0000ff"&gt;></span>22.50<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="sub"</span><span style="color: #0000ff"&gt;></span>-<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="1"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="num"</span><span style="color: #0000ff"&gt;/><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="add"</span><span style="color: #0000ff"&gt;></span>+<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="subtotal"</span><span style="color: #0000ff"&gt;></span>22.50<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="del"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>删除<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="check"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt; checked </span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>商品名称2<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="price"</span><span style="color: #0000ff"&gt;></span>12.50<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="sub"</span><span style="color: #0000ff"&gt;></span>-<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="1"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="num"</span><span style="color: #0000ff"&gt;/><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="add"</span><span style="color: #0000ff"&gt;></span>+<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="subtotal"</span><span style="color: #0000ff"&gt;></span>12.50<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="del"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>删除<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="check"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="checkbox"</span><span style="color: #ff0000"&gt; checked </span><span style="color: #0000ff"&gt;/></</span><span style="color: #800000"&gt;label</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>商品名称3<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="price"</span><span style="color: #0000ff"&gt;></span>110.40<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="sub"</span><span style="color: #0000ff"&gt;></span>-<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text"</span><span style="color: #ff0000"&gt; value</span><span style="color: #0000ff"&gt;="1"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="num"</span><span style="color: #0000ff"&gt;/><</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="add"</span><span style="color: #0000ff"&gt;></span>+<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="subtotal"</span><span style="color: #0000ff"&gt;></span>110.40<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="del"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>删除<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;td </span><span style="color: #ff0000"&gt;colspan</span><span style="color: #0000ff"&gt;="5"</span><span style="color: #ff0000"&gt; style</span><span style="color: #0000ff"&gt;="text-align: right;"</span><span style="color: #0000ff"&gt;></span>总件数:<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;i </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="numAll"</span><span style="color: #0000ff"&gt;></span>0<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;i</span><span style="color: #0000ff"&gt;></span>件  <span style="color: #ff0000"&gt;&amp;nbsp;</span> <span style="color: #ff0000"&gt;&amp;nbsp;</span>   总计:<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;i </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="total"</span><span style="color: #0000ff"&gt;></span>0.00<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;i</span><span style="color: #0000ff"&gt;></span>元<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;td</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;tr</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;table</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="js/jquery-2.1.0.js"</span><span style="color: #ff0000"&gt; type</span><span style="color: #0000ff"&gt;="text/javascript"</span><span style="color: #ff0000"&gt; charset</span><span style="color: #0000ff"&gt;="utf-8"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="js/shopCart.js"</span><span style="color: #ff0000"&gt; type</span><span style="color: #0000ff"&gt;="text/javascript"</span><span style="color: #ff0000"&gt; charset</span><span style="color: #0000ff"&gt;="utf-8"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

css样式:

{:;:; }table th,table td,input{<span style="color: #ff0000">
text-align
:<span style="color: #0000ff"> center
;
}<span style="color: #800000">
table #checkAll
{<span style="color: #ff0000">
width
:<span style="color: #0000ff"> 150px
;
}<span style="color: #800000">
table #checkAll label{<span style="color: #ff0000">
cursor:<span style="color: #0000ff"> pointer;<span style="color: #ff0000">
background:<span style="color: #0000ff"> url(../img/confirm.png) no-repeat center left;<span style="color: #ff0000">
padding-left:<span style="color: #0000ff">10px;
}<span style="color: #800000">
table .check label{<span style="color: #ff0000">
cursor:<span style="color: #0000ff"> pointer;<span style="color: #ff0000">
background:<span style="color: #0000ff"> url(../img/confirm.png) no-repeat center;
}<span style="color: #800000">

table #checkAll input,table .check input{<span style="color: #ff0000">
visibility:<span style="color: #0000ff"> hidden;

}<span style="color: #800000">

table input[type="text"]{<span style="color: #ff0000">
width:<span style="color: #0000ff"> 50px;<span style="color: #ff0000">
overflow:<span style="color: #0000ff"> hidden;
}<span style="color: #800000">
table span{<span style="color: #ff0000">
display:<span style="color: #0000ff"> inline-block;<span style="color: #ff0000">
width:<span style="color: #0000ff"> 20px;<span style="color: #ff0000">
background:<span style="color: #0000ff"> #8C8C8C;<span style="color: #ff0000">
margin:<span style="color: #0000ff">0px 5px ;<span style="color: #ff0000">
color:<span style="color: #0000ff"> #FFFFFF;<span style="color: #ff0000">
cursor:<span style="color: #0000ff"> pointer;
}

js:

$(</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 全选</span> $("#checkAll input").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> flag = $(<span style="color: #0000ff"&gt;this</span>).prop("checked"<span style="color: #000000"&gt;); </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(flag) { $(</span>".check label input").prop("checked",<span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;); $(</span>"#checkAll label").css("background","url(img/confirm.png) no-repeat center left"<span style="color: #000000"&gt;); $(</span>".check label").css("background","url(img/confirm.png) no-repeat center"<span style="color: #000000"&gt;); } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; { $(</span>".check label input").prop("checked",<span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;); $(</span>"#checkAll label").css("background","url(img/confirm_no.png) no-repeat center left"<span style="color: #000000"&gt;); $(</span>".check label").css("background","url(img/confirm_no.png) no-repeat center"<span style="color: #000000"&gt;); } counts(); totalPrice(); }); </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;单选</span> $(".check input").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> flag = $(<span style="color: #0000ff"&gt;this</span>).prop("checked"); <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;获取当前input的状态</span> <span style="color: #0000ff"&gt;var</span> CL = $(".check input").length; <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;列表长度;</span> <span style="color: #0000ff"&gt;var</span> CH = $(".check input:checked").length; <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;列表中被选中的长度</span> <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(flag) { $(</span><span style="color: #0000ff"&gt;this</span>).parent("label").css("background","url(img/confirm.png) no-repeat center"<span style="color: #000000"&gt;); } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; { $(</span><span style="color: #0000ff"&gt;this</span>).parent("label").css("background","url(img/confirm_no.png) no-repeat center"<span style="color: #000000"&gt;); } </span><span style="color: #0000ff"&gt;if</span>(CL ==<span style="color: #000000"&gt; CH) { $(</span>"#checkAll input").prop("checked",<span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;); $(</span>"#checkAll label").css("background","url(img/confirm.png) no-repeat center left"<span style="color: #000000"&gt;); } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; { $(</span>"#checkAll input").prop("checked",<span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;); $(</span>"#checkAll label").css("background","url(img/confirm_no.png) no-repeat center left"<span style="color: #000000"&gt;); } counts(); totalPrice(); }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;数目加</span> $(".add").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> num = $(<span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;).prev().val(); </span><span style="color: #0000ff"&gt;var</span> price = parseFloat($(<span style="color: #0000ff"&gt;this</span>).parent().siblings(".price"<span style="color: #000000"&gt;).text()); num</span>++<span style="color: #000000"&gt;; $(</span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;).prev().val(num); </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 小计</span> $(<span style="color: #0000ff"&gt;this</span>).parent().siblings(".subtotal").text((price * num).toFixed(2<span style="color: #000000"&gt;)); counts(); totalPrice(); }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;数目减</span> $(".sub").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> num = $(<span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;).next().val(); </span><span style="color: #0000ff"&gt;var</span> price = parseFloat($(<span style="color: #0000ff"&gt;this</span>).parent().siblings(".price"<span style="color: #000000"&gt;).text()); num</span>--<span style="color: #000000"&gt;; </span><span style="color: #0000ff"&gt;if</span>(num <= 0<span style="color: #000000"&gt;) { num </span>= 0<span style="color: #000000"&gt; } $(</span><span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;).next().val(num); </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; 小计</span> $(<span style="color: #0000ff"&gt;this</span>).parent().siblings(".subtotal").text((price * num).toFixed(2<span style="color: #000000"&gt;)); counts(); totalPrice(); }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;文本框脱里焦点处理</span> $('.num').each(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(i) { $(</span><span style="color: #0000ff"&gt;this</span>).blur(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { let p </span>= parseFloat($(<span style="color: #0000ff"&gt;this</span>).parents('tr').find(".subtotal"<span style="color: #000000"&gt;).text()); let c </span>= parseFloat(<span style="color: #0000ff"&gt;this</span><span style="color: #000000"&gt;.value); console.log(p</span>*<span style="color: #000000"&gt;c); $(</span><span style="color: #0000ff"&gt;this</span>).parents('tr').find(".subtotal").text((c * p).toFixed(2<span style="color: #000000"&gt;)); counts(); totalPrice(); }) }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;单行删除</span> $(".del button").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> flag = $(<span style="color: #0000ff"&gt;this</span>).parent().siblings().find("input").prop("checked"<span style="color: #000000"&gt;); </span><span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(flag) { </span><span style="color: #0000ff"&gt;if</span>(confirm("是否确定删除"<span style="color: #000000"&gt;)) { $(</span><span style="color: #0000ff"&gt;this</span>).parents("tr"<span style="color: #000000"&gt;).remove(); </span><span style="color: #0000ff"&gt;var</span> CL = $(".check input").length; <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;列表长度;</span> <span style="color: #0000ff"&gt;if</span>(CL == 0<span style="color: #000000"&gt;) { $(</span>"#checkAll label input").prop("checked",<span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;); $(</span>"#checkAll label").css("background","url(img/confirm_no.png) no-repeat center left"<span style="color: #000000"&gt;); } counts(); totalPrice(); } } }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;全删除</span> $("#checkAll button").click(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() { </span><span style="color: #0000ff"&gt;var</span> flag = $(<span style="color: #0000ff"&gt;this</span>).prev().children().prop("checked"<span style="color: #000000"&gt;); </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; console.log(flag);</span> <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt;(flag) { </span><span style="color: #0000ff"&gt;if</span>(confirm("是否确定删除"<span style="color: #000000"&gt;)) { $(</span>".check"<span style="color: #000000"&gt;).parent().remove(); </span><span style="color: #0000ff"&gt;var</span> CL = $(".check input").length; <span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;列表长度;</span> <span style="color: #0000ff"&gt;if</span>(CL == 0<span style="color: #000000"&gt;) { $(</span>"#checkAll label input").prop("checked","url(img/confirm_no.png) no-repeat center left"<span style="color: #000000"&gt;); } counts(); totalPrice(); } } }) </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;总价格</span>

<span style="color: #000000"> totalPrice();

</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; totalPrice() {
    </span><span style="color: #0000ff"&gt;var</span> prices = 0<span style="color: #000000"&gt;;
    $(</span>'.check input:checked').each(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(i) {
        console.log()
        prices </span>+= parseFloat($(<span style="color: #0000ff"&gt;this</span>).parents("tr").find('.subtotal'<span style="color: #000000"&gt;).text());
    })
    $(</span>'#total'<span style="color: #000000"&gt;).text(prices);
}
</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;总数目</span>

<span style="color: #000000"> counts();

</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; counts() {
    </span><span style="color: #0000ff"&gt;var</span> sum = 0<span style="color: #000000"&gt;;
    $(</span>'.check input:checked').each(<span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(i) {
        sum </span>+= parseInt($(<span style="color: #0000ff"&gt;this</span>).parents("tr").find('.num'<span style="color: #000000"&gt;).val());
    })
    $(</span>'#numAll'<span style="color: #000000"&gt;).text(sum);
}

})

总结

以上是脚本之家为你收集整理的购物车功能:使用jQuery实现购物车全选反选,单选,商品增删,小计等功能全部内容,希望文章能够帮你解决购物车功能:使用jQuery实现购物车全选反选,单选,商品增删,小计等功能所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: