【小白成长史】checkbox相关单选，多选，点击图片选择

最新推荐文章于 2021-12-21 10:08:23 发布

午夜前醒来

最新推荐文章于 2021-12-21 10:08:23 发布

阅读量640

点赞数

CC 4.0 BY-SA版权

文章标签： java js jsp springmvc

本文链接：https://blog.youkuaiyun.com/qq_33149687/article/details/74720197

这篇博客讲述了在JavaWeb开发中如何处理checkbox，包括单选、多选以及全选功能的实现。作者通过在每个checkbox上绑定onchange事件，并利用JavaScript管理已选对象的ID，以此来控制对象的选中状态。

由于我做的操作是选中多个对象进行操作，可以一个个选，可以全选，所以我这里用到了集合

先说单选的时候，我给每一个checkbox都加了一个onchange='onChecked()'事件，下面的代码的原理就是将已经选择的对象的id存到arr中，根据arr中的id确定对象是否被选中。

        var checkType ;

	var arr =[];

	function  onChecked() {
            checkType = "单选"
            $("input[type='checkbox']").each(function() {
                if(this.checked==true){
                    arr.push($(this).val());
                    arr.sort();
                    for(var i = 1; i < arr.length; i++){
                        //从数组第二项开始循环遍历数组，判断相邻两个元素是否相等，如果相等说明数据重复，删掉一个
                        if(arr[i] == arr[i- 1]){
                            arr.splice(i,1)
                        }
                    }
                }
                if(this.checked==false){
                    for (var i=0;i<arr.length;i++){
                        if($(this).val()==arr[i]){
                            arr.splice(i,1)
                        }
                    }
                }

            });

        }

所以在翻页的代码的时候还要填上这一段，判断每次翻页后该页已经被选中的对象，并且显示checkbox被选中的样式

            if(checkType=="单选") {
                $("input[type='checkbox']").each(function () {
                    for (var i = 0; i < arr.length; i++) {
                        if ($(this).val() == arr[i]) {
                            this.checked = true;
                        }
                    }
                });
            }else{
                if (isCheckPage == true){
                    $("input[type='checkbox']").each(function() {
                        this.checked = true;
                    });
                }else{
                    $("input[type='checkbox']").each(function() {
                        this.checked = false;
                });
                }
            }

isCheckPage 是用来决定是全选还是取消全选的标志。

那么截下来要说的就是选择图片也可以让对应的checkbox为选中状态

            $(".imgcheck").on('click',function (e) {
                $(this).parent().find(':checkbox').click();
            })

这句话的意思就是找到选择图片的父级元素，再找到父级元素下的checkbox，然后进行选中。