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

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

先说单选的时候,我给每一个checkbox都加了一个οnchange='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
所以在翻页的代码的时候还要填上这一段,判断每次翻页后该页已经被选中的对象,并且显示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,然后进行选中。


你可能感兴趣的:(【小白成长史】checkbox相关单选,多选,点击图片选择)