实现全选或者多选删除

 
 

 实现思路:
1.实现全选全不选操作
2.判断用户选了没,通过ids数组的长度确定
3.后端获取数据,前后端不分离可以用这种restful风格把数组传给前台,前后端分离的话还可以通过ajax在后端通过reguest.getparametervalues获得数组
4.遍历数组,执行删除方法

js代码如下(ids.push,js数组放入元素的方法)

获取或设置Boolean类型的值用prop

认真看看,可以理解的

 <script type="text/javascript">
       $(function () {
            $("#checkAll").change(function () {//全选idcheckall
                $("input[name='ids']").prop("checked", $(this).prop("checked"))
            })
        })
</script>
    <script>
        function batchDelete() {
            let alls = document.getElementsByName("ids");//let all = $("input[name='ids']");//所有可选框name都是ids
            var ids =new Array();
            for (let i = 0; i < alls.length; i++) {
                if (alls[i].checked){
                    ids.push(alls[i].value);//checked和value不会直接提示输入,只管写,没有错
                }
            }
            if (ids.length>0){
                if (confirm("确认删除?")){//confirm
                    window.location.href="/route/batchDelete/"+ids;//携带数组也可以
                }
            }else{
                alert("请选择操作项")
            }
        }
    </script>

如果对分页方法有疑问,可以参考我的另一篇文章,介绍的应该是比较全,有各种情况的处理方法,没有单独抽取出来,这篇文章也差点放进去哈哈

使用thymeleaf的一些个人经验总结_love_yr的博客-CSDN博客

Guess you like

Origin blog.csdn.net/love_yr/article/details/121553868