使用jQuery完成复选框的全选和全部选（对比JavaScript）

最新推荐文章于 2024-07-14 22:41:24 发布

EnNaKk

最新推荐文章于 2024-07-14 22:41:24 发布

阅读量528

点赞数

分类专栏：框架的简单应用

本文链接：https://blog.csdn.net/weixin_42078450/article/details/86556648

版权

框架的简单应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、案例描述

开发中，经常表格数据进行批处理，就需要快速的对列表项进行操作，比如全选和全不选。

2、jQuery代码实现

$(function(){
    //1、为复选框绑定单击事件
    $("#selectAll").click(function(){
        //方式一：
        if(this.checked == true){
            //如果复选框已经是选中状态了
            $("input[name='ids']").prop("checked",true);
        }else{
            //复选框没有被选中
            $("input[name='ids']").prop("checked",flase);
        }
        

        //方式二：
        $("input[name='ids']").prop("checked",this.checked);

    });
});

3、JavaScript代码实现（对比）

3.1、给复选框添加onclick事件

<input type="checkbox" onclick="selectAll(this)">

3.2、编写selectAll(this)处理列表项的复选框是否勾选

<script type="text/javascript">
    function selectAll(obj){
        //如果当前复选框为选中状态，则其他都选中，否则都不选中
        //ByClassName--->通过标签class属性的名称获得对应的标签
        var allCheckbox = document.getElementByClassName("itemSelect");
        for(var i = 0; i < allCheckbox.length; i++){
            allCheckbox[i].checked = obj.checked;
        }
    }
</script>