Jquery CheckBox全选方法

最新推荐文章于 2021-08-16 15:16:05 发布

原创最新推荐文章于 2021-08-16 15:16:05 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #ViewUI

本文介绍了一种使用JQuery简化全选与反选功能的方法。通过一个简单的函数实现对页面上所有复选框的批量操作，并对比了纯JavaScript实现方式，展示了JQuery在代码简洁性和易用性方面的优势。


方法如下： 

function CheckAll(val) {
            $("input[name='chkJob']").each(function() {
                this.checked = val;
            });
            $("#chkAll").attr("checked", val);//设定全选按钮状态
        }



val 该参数传递的是全选按钮的选择状态 

name='chkJob' 这个为列表中的checkbox名称

chkAll 就为全选按钮名称



喜欢上了Jquery的简便、明了··· 

与用JavaScript写的比起来真的有点差距！

eg：

// 全选

function checkall() {

    var all = document.getElementsByTagName("input");

    for (var i = 0; i < all.length; i++) {

        if (all[i].type == "checkbox") {

            all[i].checked = true;

        }

    }

}

// 反选

function checknull() {

    var all = document.getElementsByTagName("input");

    for (var i = 0; i < all.length; i++) {

        if (all[i].type == "checkbox") {

            all[i].checked = false;

        }

    }

}