jQuery第三天案例_jquery 选中input中的第一个-CSDN博客

本文链接：https://blog.csdn.net/m0_46597922/article/details/106629756

本文通过五个jQuery案例介绍了如何实现购物车全选功能、京东轮播图、下拉菜单、手风琴效果和音乐导航。重点探讨了prop()方法用于处理复选框的选中状态，以及stop()方法在优化动画中的应用。

摘要由CSDN通过智能技术生成

案例一：购物车案例模块-全选（ prop() 知识点）

分析
① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮，就来判断：
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
⑥ :checked 选择器 :checked 查找被选中的表单元素。

在这里插入图片描述

  <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;
      color: #404060;
      padding: 10px;
    }
    
    th {
    
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
    
      font: 14px "微软雅黑";
    }
    
    tbody tr {
    
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
    
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <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>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧狮子头</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>日式肥牛</td>
          <td>田老师</td>
        </tr>

      </tbody>
    </table>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    //   先写入口函数
    $(function() {
    
        // 分析：
        // 1.点击全选来控制下面四个input的选中状态（checked属性 ==> prop()方法）
            // 和全选的选中状态一致


        // 找对象
        var $all = $('#j_cbAll');
        var $inps = $('#j_tb input');

        $all.click(function() {
    
            // 1.先获取全选选中状态
            var res = $(this).prop('checked');

            // 1.2控制下面四个input
            $inps.prop('checked', res);
        })


        // 2.点击下面input反过来控制上面的全选的选中状态
            // 如果四个选中则全选选中
            // 否则，只要有一个没有被选中，全选就不用选中

        $inps.click(function() {
    

            var len = $('#j_tb input:checked').length;
            // 是四个input里面选中的 ==> :checked
            // 要想知道多少个input选中，通过length属性获取结果
            if(len === 4) {
    
                //四个选中则全选选中
                $all.prop('checked', true);
            } else {
    
                // 至少有一个没有被选中，全选就不用选中
                $all.prop('checked', false);
            }
        })
    })
  </script>
</body>

代码优化

  <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;
      color: #404060;
      padding: 10px;
    }
    
    th {
    
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
    
      font: 14px "微软雅黑";
    }
    
    tbody tr {
    
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
    
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">