业务需求:可以根据检验盒的先后勾选传递有顺序的值让后台接收,决定用标签输入显示检验盒的先后勾选顺序,并实时响应检验盒的勾选状态
思路:复选框的值存在一个数组一个,新创建一个数组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-标签-输入
资源:演示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。