原生js实现多选框的排序以及可选个数控制

客官°小女子只卖身不卖艺 2022-07-12 10:26 127阅读 0赞

**展示页面：** [http://codepen.io/crystalYY/pen/ggNjQR][http_codepen.io_crystalYY_pen_ggNjQR]

--------------------

**主要效果：**

1.  最多可选择三项，用户尝试选择第四项时，多选框变为`disabled`禁用状态
2.  按照用户点击的顺序实时给出已选择的多选框所对应的序号
3.  左下方实时提醒用户当前已选择了几项

--------------------

**实现思路：**

1.  设置一个用来存放已经选定的多选框，即`obj.checked=true`的value的数组`checkedArray`
2.  **效果1实现思路：**通过监听每个`input`的`click`事件，如果(if)`checkedArray.length`大于或等于3并且当前所点击的`input`**在这次点击事件之前为未选择（意思是点击之后为选中状态）**，即`checkedArray.length>=3&&currentTarget.checked==true`，则设置此次点击无效`currentTarget.checked=false`,并且通过遍历所有`input`,将`checked==false`的设置为禁用状态。  
    (else)除上面已说的情况外的其他情况，则通过判断点击后`check==ture`还是`checked==false`分别向`checkedArray`数组中`push`当前选中的多选框的`value`,或者删除数组中和当前取消选中的多选框的`value`相等的元素。
3.  **效果2实现思路：**遍历所有`input`,获取对于的`value`值，使用`indexOf()`函数来在`checkedArray`中定位，不返回-1说明已经被选中，**将返回值+1**后填入之前写好的`span`标签内
4.  **效果3实现思路**：获取`checkedArray.length`

--------------------

**需要注意的点**

1.  考虑到input可能会很多，所以使用了事件委托，把`click`事件绑定在`input`的父级上，通过`event target`的使用完成`input`上点击事件的绑定
2.  因为input和label标签相互依赖，所以会触发**两次点击事件**，我们只需要`input`上的点击事件，防止`label`的干扰，可以通过判断是否为`label`,如果是就返回的方法来实现，即

if(tar.nodeName.toLowerCase()=='label'){
            return;
        }

--------------------

**可以改进的地方**

1.  循环太多，遍历了很多次input，内存占用大
2.  如果把整个功能封装，可以减少整个项目的代码量，如果是需要做一个问卷系统的话

[http_codepen.io_crystalYY_pen_ggNjQR]: http://codepen.io/crystalYY/pen/ggNjQR