关于动态创建input checkbox的应用

淡淡的烟草味﹌ 2022-07-15 05:49 245阅读 0赞

### 业务场景: ###

为列表加上复选框,选中的则将值填充到一个文本框,最多允许填充10个.列表为动态创建的,可翻页.

### 代码实现: ###

#### 1.对复选框的操作    ####

// 复选框
        var checkbox = document.createElement("input");
        checkbox.setAttribute("type", "checkbox");
        checkbox.setAttribute("name", "kk");
        checkbox.setAttribute("value", item.showtext);
        node.appendChild(checkbox);
        // 翻页时,如果被选中的,则自动勾选
        var kdids = $("#kdbh").val();
        if(kdids.indexOf(item.id)!=-1){
            checkbox.checked = true;
        }
        checkbox.onclick = function() {
            var checked = this.checked;
            // 如果当前操作为选中,并且已选择的卡口数达到了10则取消当前选择
            if(countkk == 10 && checked){
                alert("最多只能选择10个卡口，您已选择了10个卡口!");
                this.checked = false;
                return;
            }else{
                var gate  =
                {
                        "id" : item.id,
                        "name" : item.showtext
                }
                fillInput(gate,checked);
            }
        }

#### 2.选中内容填充到文本框 ####

### 分析: ###

#### 1.如何确定已选择的个数? ####

我首先想到的是直接得到指定name的所有选中的checkbox,从而得到个数.可以使用如下代码,在IE7，IE8和IE9兼容模式，IE9标准模式中也能正常使用

var selectChks = $("input[type=checkbox][name=kk]:checked");
    var count = selectChks.length;

这样,我只需要在点击复选框之后就可以得到已选择的个数了.然而问题来了.当翻页之后,前面选择的就丢失了.这个时候.我们是不是要解决翻页丢失问题呢?好吧,先来说下在翻页丢失选中的情况下如何获取已选择的个数.

既然选中丢失,那么使用checkbox选中的个数就 不准确了,我们直接定义一个全局变量,来存放文本框中填充的个数,点击checkbox时判断如果达到10,并且为选中操作时,则取消并返回.

#### 2.翻页之后,怎么解决丢失的情况? ####

将选中的存起来,翻页时,去对比,如果存在,则设置选中.

### 注意点: ###

#### 1.动态创建input checkbox时,如何添加click事件,如何设置默认选中? ####

这两种使用setAttribute都是无效,添加click事件要在appendChild方法之后使用obj.onclick = function()\{\},默认选中要在appendChild方法之后使用obj.checked=true;