全选反选（双重for循环经典案例）

最新推荐文章于 2022-04-06 15:29:05 发布

记录我的前端生活

最新推荐文章于 2022-04-06 15:29:05 发布

阅读量388

点赞数 1

文章标签： html5 css 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_64148060/article/details/121484808

版权

本文探讨了前端开发中全选反选的经典案例，以淘宝购物车为例，解释了如何通过双重for循环来实现全选和单选之间的联动效果。分析了从上往下和从下往上的逻辑，强调了表头和表体的一致性以及良好的HTML结构。通过绑定事件和检查剩余选项状态，确保全选按钮与各单选按钮的状态同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个布局相信大家并不陌生，其实打开我们的淘宝购物车，就能发现，我们如果收藏了一个店铺，并一次性在这家店铺添加了好几个商品，如果我们选择把商品每一个都画上对勾，就会发现最上面的这家店铺也被勾选，如果我们勾选了这家店铺，随之选择的每个商品都会被选择，如果我们没有勾选所有商品，那么这个店铺就不会被勾选。其实这个案例，就是淘宝购物车的一个缩影，那么我们就通过代码来具体说明


<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;