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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
详解jquery选择器的原理
Aug 01 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现飞机大战小游戏
Jul 05 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操作数组相关函数
2011/02/03 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python之消除前缀重命名的方法
2018/10/21 Python
python 处理string到hex脚本的方法
2018/10/26 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
德国拖鞋网站:German Slippers
2019/11/08 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
公司外出活动方案
2014/08/14 职场文书
擅自离岗检讨书
2014/09/12 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
高中班主任心得体会
2016/01/07 职场文书
python库sklearn常用操作
2021/08/23 Python