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

来源：互联网发布：数据集成平台软件编辑：程序博客网时间：2024/04/30 13:42

业务需求：可以根据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" onclick="radioHandle(this.value)" />Apple<input type="checkbox" value="1" name="fruit" onclick="radioHandle(this.value)" />Banana<input type="checkbox" value="2" name="fruit" onclick="radioHandle(this.value)" />Pear<input type="checkbox" value="3" name="fruit" onclick="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>

参考：https://github.com/xoxco/jQuery-Tags-Input

资源Demon：http://download.csdn.net/detail/u013361445/9401282

0 0