jquery.tagsinput.js实现记录checkbox勾选的顺序-偶像资源网

业务需求：可以根据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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论