淘宝多选交互效果JavaScript实现

淘宝筛选区的那种多选效果，用在表单、商品筛选里，体验还挺不错的。用户能点一点就选上、再点一下就取消，操作流畅，响应也快。

页面结构一般用HTML的加来搭。再加点CSS，比如用:checked伪类给选中的打个勾，或者高亮一下，视觉效果立马提升不少。

JavaScript这边也得跟上，监听change事件就行。比如你想知道用户选了几个，就遍历一下这些 checkbox，更新个数字展示就好了。也可以用classList.toggle()给选项加高亮，用户反馈更。

更高级一点的玩法，就是加Ajax。用户每选一个，前端就把数据发给后端，后端马上返回过滤后的内容。不用刷新，数据直接变，有“淘宝味”。

文件包texiao5783_1560681032里带了完整的代码，解压后看下，有是原生 JS 写的，也用了jQuery或Vue之类的。如果你刚好项目里也有类似需求，拿来改一改就能用。

对了，想扩展玩法的话，可以参考这几个资源：

• javascript 下拉多选框复选框
• 多选复选框
• 带进度条的 CSS3 复选框多选动画特效

如果你在做表单或者商品筛选功能，想搞点有互动感的 UI，真可以研究下这个效果，蛮实用的。