jquery.tagsinput.js实现记录checkbox勾选的顺序
业务需求：可以根据checkbox的先后勾选传递有顺序的值让后台接收，决定用tagsinput显示checkbox的先后勾选顺序，并实时响应checkbox的勾选状态
思路：checkbox的值存在一个数组A，新创建一个数组B，如果选中一个，B push一个值，取消一个，remove一个值，因为数组是有序的，就做到响应checkbox的勾选顺序
效果：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tagsinput Checkbox</title> <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" > </head> <body> checkbox: <input type="checkbox" value="0" name="fruit" οnclick="radioHandle(this.value)" />Apple <input type="checkbox" value="1" name="fruit" οnclick="radioHandle(this.value)" />Banana <input type="checkbox" value="2" name="fruit" οnclick="radioHandle(this.value)" />Pear <input type="checkbox" value="3" name="fruit" οnclick="radioHandle(this.value)" />Orange <br><br> <input type="text" id="fruit-tags" name="fruit-tags" > <input type="text" id="fruitChecked"> <script src="jquery.min.js" ></script> <script src="jquery.tagsinput.js" ></script> <script type="text/javascript"> var fruitValue = new Array(); var fruitName = ['Apple','Banana','Pear','Orange']; Array.prototype.removeByValue = function(val) { for(var i=0; i<this.length; i++) { if(this[i] == val) { this.splice(i, 1); break; } } }; $('#fruit-tags').tagsInput({ interactive: false, removeWithBackspace: false, onRemoveTag: function(value){ //重点 通过值获得数组的索引 //删除 checkbox不勾选 数组remove值 显示改变 var index = fruitName.indexOf(value); $("input:checkbox[name=fruit][value="+index+"]").prop("checked",false); fruitValue.removeByValue(index); $('#fruitChecked').val(fruitValue.toString()); } }); function radioHandle(value){ // --- 选中 push-- if($("input:checkbox[name=fruit][value="+value+"]").is(':checked')){ if($('#fruitChecked').val().indexOf(value) == -1){ fruitValue.push(value); $('#fruit-tags').addTag(fruitName[parseInt(value)]); } }else{ if($('#fruitChecked').val().indexOf(value) > -1){ fruitValue.removeByValue(value); $('#fruit-tags').removeTag(fruitName[parseInt(value)]); } } $('#fruitChecked').val(fruitValue.toString()); } </script> </body> </html>
参考：jQuery-Tags-Input
资源：Demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍checkbox勾选判断代码分析，包括了checkbox勾选判断代码分析的使用技巧和注意事项，需要的朋友参考一下 最开始这样写，不过并不是所有的情况都需要勾选这个协议，协议有时不会在前台页面显示，所以改了第二种 当xieYi不存在的时候，xieYi为null，判断xieYi不为null的时候并且xieYi没有勾选的时候就alert。 可惜，这段代码没有发挥预想中的作用。 最后发现是判
-
本文向大家介绍bootstrap-Treeview实现级联勾选，包括了bootstrap-Treeview实现级联勾选的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了bootstrap Treeview实现级联勾选的具体代码，供大家参考，具体内容如下 核心方法 6-27 : 经部分网友反馈，图中的 if(!("id" in perentNode)) 需要改成 if(!("nodeId
-
本文向大家介绍javascript实现checkBox的全选，反选与赋值，包括了javascript实现checkBox的全选，反选与赋值的使用技巧和注意事项，需要的朋友参考一下 我们平时在做项目的时候，经常会遇到需要实现实现checkBox的全选，反选与赋值的情况，网上也有许多的范例，这里给大家分享的是本人常用的方法，推荐给大家。 以上就是本示例的全部代码了，希望对大家学习使用javascrip
-
本文向大家介绍jQuery实现checkbox列表的全选、反选功能，包括了jQuery实现checkbox列表的全选、反选功能的使用技巧和注意事项，需要的朋友参考一下 我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如： 我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id,class,现在想
-
问题描述 在同一级下面的节点，我想要拿到el-tree勾选的节点 判断如果节点满足条件会自动勾选其他的节点 你期待的结果是什么？ 比如 勾选2-1，通过'-'左边判断，如果是2，就自动勾选2-0；如果是3，就自动勾选3-0，并且在有2-1的情况下，点击2-0不能被取消勾选，除非只有2-0自身了，点击才能取消勾选。这种判断只判断同一级的，不同级的不判断 勾选3 自动勾选3-0 我遇到的问题？ 如果我
-
本文向大家介绍javascript实现checkbox复选框实例代码，包括了javascript实现checkbox复选框实例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下 1、checkbox复选框进行美化操作 复选框默认外表的美观度差强人意，能够满足美