jquery.tagsinput.js实现记录checkbox勾选的顺序


Posted in jQuery onSeptember 21, 2019

业务需求:可以根据checkbox的先后勾选传递有顺序的值让后台接收,决定用tagsinput显示checkbox的先后勾选顺序,并实时响应checkbox的勾选状态

思路:checkbox的值存在一个数组A,新创建一个数组B,如果选中一个,B push一个值,取消一个,remove一个值,因为数组是有序的,就做到响应checkbox的勾选顺序

效果:

jquery.tagsinput.js实现记录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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 #jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 #jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Django与JS交互的示例代码
2017/08/23 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
改革共识倡议书
2014/08/29 职场文书
鲁冰花观后感
2015/06/10 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
python中requests库+xpath+lxml简单使用
2021/04/29 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android