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 相关文章推荐
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
html中两种获取标签内的值的方法
Jun 16 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
使用PHP模拟HTTP认证
2006/10/09 PHP
php牛逼的面试题分享
2013/01/18 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
VuePress 快速踩坑小结
2019/02/14 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
五种Python转义表示法
2020/11/27 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
宾馆总经理岗位职责
2014/02/14 职场文书
1亿有多大教学反思
2014/05/01 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
红色革命电影观后感
2015/06/18 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
幼儿园中班教学反思
2016/03/03 职场文书