业务需求：可以根据检验盒的先后勾选传递有顺序的值让后台接收，决定用标签输入显示检验盒的先后勾选顺序，并实时响应检验盒的勾选状态

思路：复选框的值存在一个数组一个，新创建一个数组b，如果选中一个推一个值，取消一个，移除一个值，因为数组是有序的，就做到响应检验盒的勾选顺序

效果：

代码：

！DOCTYPE html html heartheta charset=' UTF-8 ' title tagsinput Checkbox/title link rel='样式表type=' text/CSS ' href=' jquery。tagsinput。CSS '/头体复选框：输入类型='复选框'值='0 '名称='水果n click='单选手柄(这。价值)'/苹果输入类型='复选框'值='1 '名称='水果n click='单选手柄(这。值)'/香蕉输入类型='var水果名称=['苹果','香蕉','梨','橘子'];数组。原型。removebyvalue=function(val){ for(var I=0；长度；I){ if(this[I]==val){ this。拼接(，1)；打破；} } };$(' #水果标签')。标记输入({ interactive : false，removeWithBackspace: false，onRemoveTag:函数（值){ //重点通过值获得数组的索引//删除检验盒不勾选数组移动值显示改变var指数=水果名称。indexOf(值);$('输入：复选框[名称=水果][值='索引']').prop('checked '，false)；水果值. removeByValue(索引);$(' #水果检查')。val(FoundVaLue。ToString())；} });函数radioHandle(值){ //-选中如果($('输入：)复选框[名称=水果][value=' value ']').是(' :选中'){ if($(' #水果检查')。val().(值)==-1)的索引{ FoundVaLue。推送(值)；$(' #水果标签')。addTag(水果名称[parseInt(值)]);} } else { if($(' #水果检查')。val().(值)-1)的索引{ FoundVaLue。removeByVaLue(值)；$(' #水果标签')。removeTag(水果名称[parseInt(值)]);} } $(' #水果检查')。val(FoundVaLue。ToString())；}/脚本/正文/html参考：jQuery-标签-输入

资源：演示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。