text 选择全部/取消选中所有复选框。

Posted 2021-05-02

// HTML
 <div class="wrapper">
   <table id="tableA" class="table">
     <thead>
       <tr>                        
         <th><input type="checkbox" /></th>
         <th>City</th>
         <th>English</th>
         <th>Spanish</th>
         <th>French</th>
         <th>German</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td><input type="checkbox" /></td>
         <td>Chicago</td>
         <td>Test </td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
       <tr>
         <td><input type="checkbox" /></td>
         <td>Los Angeles</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
       <tr>
         <td><input type="checkbox" /></td>
         <td>Salzburg</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
       <tr>
         <td><input type="checkbox" /></td>
         <td>Milan</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
       <tr>
         <td><input type="checkbox" /></td>
         <td>Berlin</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
       <tr>
         <td><input type="checkbox" /></td>
         <td>London</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
         <td>Test</td>
       </tr>
     </tbody>
   </table>
</div>

// SCSS -------------------


body {
    background:#f6f6f6;
    overflow-x:hidden;
}
 $border: 1px solid #d2d1d1;
 $padding: .25rem;


.wrapper{
    background:#f5f5f5;
}

table {
    border-collapse: collapse;
    border-spacing: 0.75rem;
}

th {
  padding: $padding;
  border: $border;
  
}

td {
  padding: $padding;
  border: $border;
}
// jQuery -----------------------------------------

$("#tableA th:first input:checkbox").click(function () {
    var checkedStatus = this.checked;
    $("#tableA td:first-child input:checkbox").each(function () {
        this.checked = checkedStatus;
    });
});