全选文本框示例

  • 全选文本框示例已关闭评论
  • 73 次浏览
  • A+
所属分类:Web前端
摘要

input:checked举个例子


一、实现效果

  • 点击全选按钮/取消全选,控制商品的全选或取消
  • 每个商品的复选框都选中后,自动勾上全选按钮,或者商品任何一个复选框没有选中,取消全选

全选文本框示例

二、思路

  • 就是由大的全选按钮,控制所有的复选框
  • 小的复选框控制大的全选按钮

三、js中小的复选框控制大的全选框,用到了一个css伪类选择器

input:checked

举个例子

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Title</title>     <style>         input:checked{             width: 50px;             height: 50px;         }     </style> </head> <body>     <input type="checkbox" > </body> </html> 

全选文本框示例

四、完整的代码段

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Title</title>     <style>         div {             margin: 100px auto;             width: 500px;             height: 300px;         }          table {             border-collapse: collapse;             width: 100%;             height: 50%;             text-align: center;         }          table tr th {             background-color: #3899ce;         }     </style> </head> <body>     <div>         <table border="1">             <thead>             <tr>                 <th><input type="checkbox" class="check-all">全选</th>                 <th>商品</th>                 <th>商家</th>                 <th>价格</th>             </tr>             </thead>             <tbody>             <tr>                 <td><input type="checkbox"></td>                 <td>小米手机</td>                 <td>小米</td>                 <td>1999</td>             </tr>             <tr>                 <td><input type="checkbox"></td>                 <td>小米净水器</td>                 <td>小米</td>                 <td>2999</td>             </tr>             <tr>                 <td><input type="checkbox"></td>                 <td>小米电视</td>                 <td>小米</td>                 <td>3999</td>             </tr>             </tbody>         </table>     </div>       <script>         const checkAll = document.querySelector('.check-all')         const checkList = document.querySelectorAll('tbody input')         //大复选框控制小复选框         checkAll.addEventListener('click', function () {             //当点击全选按钮时,每一行的checked的状态会和全选/取消是一样的,所以要获取每一行的数据在进行更改             for (let i = 0; i < checkList.length; i++) {                 checkList[i].checked = this.checked             }         })          //由小的复选框控制大的复选框         //如果勾选完每一行数据后,全选按钮自动选上,或者取消勾选一行数据,全选按钮自动取消          //核心思想就是通过css的伪类选择器,找到选中的个数与总的复选框个数进行对比         //如果选中个数===总个数,全选按钮就勾上,否则取消         for (let i = 0; i < checkList.length; i++) {             checkList[i].addEventListener('click', function () {                 checkAll.checked = document.querySelectorAll('tbody input:checked').length ===checkList.length              })         }     </script> </body>  </html>