DOM操作案例之--全选与反选

我会带着你远行 2023-06-10 14:29 212阅读 0赞

全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。

下面我只就用一个简单的案例做个演示吧。

<div class="wrap">
        <table>
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll"/>
                </th>
                <th>商品</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>小米手机</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>ThinkPad</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>iPhone7</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>iPhoneX</td>
                <td>9000</td>
            </tr>
            </tbody>
        </table>

上面是是HTML部分代码，做了一个表格。

下面是css代码：

下面是js代码，实现全选反选功能。

![1067969-20171211111643946-1390791581.png][]

上面就是这个案例的效果了。

当然，这个还可以扩展一下，做成一个购物车的案例。

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[1067969-20171211111643946-1390791581.png]: /images/20230531/8d31e366a03c46f2a6279be92e19dd84.png