1. 程式人生 > >jquery全選刪除

jquery全選刪除

turn hang 自身 數據 move sel 刪除 cti function

  全選刪除是後臺管理中經常用到的,自身js水平弱,所以記下來,方便以後使用。

  

html代碼:

<table>
            <thead>
            <tr>
                <td><input class="selectAll" type="checkbox"></td>
                <td>ID</td>
                <td>姓名</td>
                <td>
年齡</td> <td>性別</td> </tr> </thead> <tbody id="content">         <tr> <td><input name="check" type="checkbox"></td> <td>123</td> <td
>zhangsan</td> <td>24</td> <td>boy</td> </tr>         ``` </tbody> </table> <button class="deleteAll">刪除全部</button>

js代碼:

$(‘.selectAll‘).on(‘click‘, function () {
        if(this.checked) {
            $(
‘table input[name="check"]‘).prop(‘checked‘,true).val(‘1‘); } else { $(‘table input[name="check"]‘).prop(‘checked‘,false).val(‘0‘); } }); $(‘.deleteAll‘).on(‘click‘,function () { if(confirm(‘確定刪除這些數據嗎?‘)){ var checks = $(‘table input[name="check"]:checked‘); if(checks.length == 0) { alert(‘未選中任何數據!‘); return false; } $(‘table tbody‘).find(‘:checkbox[value=1]‘).parents(‘tr‘).remove(); $(‘.selectAll‘).prop(‘checked‘, false); } }) // 這裏把全選框重置為未選狀態

這裏是通過給選中的checkbox添加value的方式,然後刪除帶有這個值的元素。當然也可以添加其他屬性,比如data-*什麽的。

jquery全選刪除