JQuery操作全选与全不选,批量进行删除_实现全选全不选删除-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35584074/article/details/89381835

本文介绍了如何使用JQuery来实现页面中checkbox的全选和全不选功能，并结合此功能实现批量删除的操作。首先，需要引入jquery.js库。接着，在HTML中创建checkbox元素，注意避免ID重复，可以使用class属性进行标记。最后，编写JQuery代码，定义全选、全不选及根据选中项删除的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入jquery.js的插件
2. 编写html 此处要注意,html中的id不能重复,所以在单选的input中用class
来做标记
在这里插入图片描述

<input type=submit name=btnDEL id="btnDEL" value=" 删除 " onclick="deleteAll()">
//删除按钮标签

3.编写JQ:

$(function () {   //JQ入口函数
    //先将删除按钮初始化为禁用;
    $('#btnDEL').prop("disabled", true);
    //全选与反选
    $('#allCheck').click(function () {
        $('.check').prop('checked', this.checked);
        //判断有选中的标签,就显示删除按钮
        if (this.checked == true) {
            $("#btnDEL").prop("disabled", false);
        } else {
            $("#btnDEL").prop("disabled", true);
        }
    })
    	//获取checkbox的总个数;此处-1是因为把全选按钮也算在里面.
        var allC = $("input:checkbox").length - 1; 
        //获取checkbox改变状态,如果checkbox选中的个数小于0
        $("input:checkbox").change(function () {
        	//获取选中的checkbox个数.
            var len = $("input:checkbox:checked").length;
            //判断有选中的就放开删除按钮.
            if (allC >= len && len != 0) {  
                $("#btnDEL").prop("disabled", false);
            } else {
                $("#btnDEL").prop("disabled", true);
            }
            //如果选择按钮被全部单选,则选中全选box
            if (allC == len) {
                $('#allCheck').prop('checked', this.checked);
            }

        })
    })
//循环删除选中的网站
    function deleteAll() {
    	//获得所有选中的input标签下name='check'并切被选中的checkbox,并遍历
        $.each($("input[name='check']:checkbox:checked"), function () {
        	//判断checkbox是否被选中,选中的话就调用删除方法.
            if (this.checked) {
                var sid = $(this).val();
                del(uid);
            }
        })
    }
//删除方法
function del(uid) {
		//获取id为uid的标签的value.
		var user= document.getElementById(uid).innerHTML;
		//询问是否要进行删除
        if (confirm('您确定要删除网站 ' + user+ ' 吗?')) {
        	//下面调用window对象进行跳转,进行循环删除的时候只执行最后一次.
            // window.location.href="/sites/admin/delete/"+uid;
            //所以这里采用异步请求的方式进行跳转
            $.get("/sites/admin/delete/" + sid, function () {
                location.href = "/admin/sites";
            });
        }
    }