select 全选 / 反选 – 有爱前端

jq select 全选 / 反选：给全选input添加allChecked类，反选添加inverse，选项添加check。

$(function(){
    $('.allChecked').on('click', function(){ 
        $('.check').prop('checked', this.checked);
    });
    $('.check').on('click', function() {
        $('.allChecked').prop('checked', $('.check:checked').length == $('.check').length);
    });
    $('.inverse').on('click', function(){
        $('.check').each(function(){
            $(this).prop('checked', !this.checked);
            $('.allChecked').prop('checked', $('.check:checked').length == $('.check').length);
        })
    })
})

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select 全选 / 反选</title> <style> table{ background: #e6e6e6; color: #404040; font: 14px/40px 'Microsoft YaHei'; } thead td, tfoot td{ background: #f3f3f3; border: 1px solid #fff; } td{ background: #fff; height: 40px; line-height: 40px; padding: 0 10px; } </style> </head> <body> <table cellspacing="1" cellpadding="0" width="400" align="center"> <thead> <tr> <td width="20"><input type="checkbox" class="allChecked" /></td> <td>全选</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check" /></td> <td>老大</td> </tr> <tr> <td><input type="checkbox" class="check" /></td> <td>大葱</td> </tr> <tr> <td><input type="checkbox" class="check" /></td> <td>敏妹妹</td> </tr> <tr> <td><input type="checkbox" class="check" /></td> <td>少林</td> </tr> <tr> <td><input type="checkbox" class="check" /></td> <td>姜有余</td> </tr> <tr> <td><input type="checkbox" class="check" /></td> <td>我</td> </tr> </tbody> <tfoot> <tr> <td><input type="checkbox" class="inverse" /></td> <td>反选</td> </tr> </tfoot> </table> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function(){ $('.allChecked').on('click', function(){ $('.check').prop('checked', this.checked); }); $('.check').on('click', function() { $('.allChecked').prop('checked', $('.check:checked').length == $('.check').length); }); $('.inverse').on('click', function(){ $('.check').each(function(){ $(this).prop('checked', !this.checked); $('.allChecked').prop('checked', $('.check:checked').length == $('.check').length); }) }) }) </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » select 全选 / 反选