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 相关文章推荐
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现查看图片功能
Dec 01 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP Include文件实例讲解
2019/02/15 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python字符串中的单双引
2017/02/16 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python的常见矩阵运算(小结)
2019/08/07 Python
通过python检测字符串的字母
2020/02/18 Python
利用python生成照片墙的示例代码
2020/04/09 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
关于毕业的广播稿
2014/01/10 职场文书
个人授权委托书模板
2014/09/14 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
商务英语求职信范文
2015/03/19 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
大客户经理岗位职责
2015/04/09 职场文书