Every day to record their learning in school, so that every day of life more substantial! Come on.

Note: this case simply realizes the function of shopping selection!

Effect: to add some products, the left is the check box, the right is the selection of goods and quantity. The quantity can be increased or decreased. Only when the check box is checked, the required amount can be displayed for the added products, and the lower is the total price of goods!

html code:

<table id="tb1">
            <tr>
                <td>Check state</td>
                <td>Trade name</td>
                <td>commodity price</td>
                <td>Number</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" class="a" /></td>
                <td>Air conditioner</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>Changhong TV</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>Millet 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 air cleaner</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>Samsung display</td>
                <td class="auto-style1">2000</td>
                <td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td>
            </tr>
        </table>
        &nbsp;<h3>Total price:<span id="spNumber"></span></h3>

Jquery Code:

<script type="text/javascript">

            $(document).ready(function () {
                $(".sum").click(function () {    Add product quantity
                    var tdlist = $(this).next("input").val();   Get the value of the number of text boxes
                    var number = parseInt(tdlist) + 1;  add one-tenth
                    var sum = 0;
                    $(this).next("input").val(number);
                    getSum();
                });
                $(".min").click(function () {   Reduce the number of products
                    var tdlist = $(this).prev("input").val();
                    if (tdlist > 0) {   Quantity cannot be negative
                        var number = parseInt(tdlist) - 1;  Minus one
                        $(this).prev("input").val(number);
                        getSum();
                    }
                });
                $(".a").click(function () {
                    getSum();
                })
                function getSum() {   Total amount of products obtained
                    var trlist = $("#tb1").find("tr:gt(0)");
                    var sum = 0;
                    trlist.each(function () {
                        var check = $(this).find("input[type='checkbox']").prop("checked");  Check box for true
                        if (check == true) {
                            var monery = $(this).find(".auto-style1").text(); Get unit price of goods
                            var number = $(this).find("input:text").val();    Select item quantity
                            var s = parseInt(monery) * parseInt(number);  Multiplication
                            sum += s;
                        }
                        $("#spNumber").text(sum);  assignment
                    });
                }
            });
    </script>

This is the end of the code! There will be some more functions in the back! make persistent efforts!