本文介绍如何使用jquery.tagsinput.js插件实现Checkbox勾选顺序的记录。通过将选中值存入数组，利用push和remove操作动态维护顺序，实现前端实时响应勾选状态并将有序数据传递给后台接收。
业务需求与技术方案概述
业务场景要求根据Checkbox的勾选先后顺序传递有序值供后台处理。为此，选用tagsinput组件来展示Checkbox的勾选顺序，并实现对勾选状态的实时响应。
数组逻辑与顺序响应机制
核心逻辑在于维护两个数组：数组A存储Checkbox的值，新建数组B用于记录顺序。当用户选中某项时，将对应值push到数组B中；取消选中时，从数组B中remove该值。由于数组保持有序特性，从而实现了勾选顺序的响应。
具体效果展示如下：
代码实现与参考资源
相关代码实现如下：
<!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资源可获取。
以上内容旨在分享该实现方案，希望能为读者提供学习参考，欢迎继续支持本站获取更多技术内容。