jquery实现checkbox全选/反选/取消

转载于 2018-11-12 17:03:00 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zunwen/p/9947240.html

文章标签：

#javascript #ViewUI

本文介绍了一种在网页上批量操作复选框的方法，包括全选、反选和取消选择的功能实现。通过jQuery的选择器和事件处理，可以轻松地为复选框添加这些批量操作，提高用户在处理大量数据时的效率。

Title 全选(name=ch_all) 反选(name=reverse_all) 取消所有(name=cancle_all)

1.1.1.1	90	1.bai.com	(name=ch)
1.1.1.2	92	2.bai.com
1.1.1.3	93	3.bai.com
1.1.1.4	94	4.bai.com

全选

$('input[name=ch_all]').change(function () {
            if($('input[name=ch_all]').is(':checked')){
                $('input[name=ch]').each(function () {
                $(this).prop('checked', true);
             });
            }else{
                $('input[name=ch]').each(function () {
                $(this).prop('checked', false);
             });
            };
        });

反选

$('input[name=reverse_all]').click(function () {
           $('input[name=ch]').each(function () {
              $(this).prop('checked', !$(this).prop('checked'));
           });
        });

取消

$('input[name=cancle_all]').click(function () {
            $('input[name=ch]').prop('checked', false);
        });

转载于:https://www.cnblogs.com/zunwen/p/9947240.html