本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作，供大家参考，具体内容如下
注意这里要求使用到Bootstrap框架的输入框组，如：
Demo案例的效果图：
这里提供自制的 插件 inputGroup.js
参数为可以设置 输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。
使用inputGroup.js只要在对应的容器，如div中添加选择器，然后使用jQuery获取该选择器对应的jQuery对象，调用 initInputGroup方法即可。
inputGroup.js
/**
* Created by DreamBoy on 2016/4/29.
*/
$(function() {
$.fn.initInputGroup = function (options) {
//1.Settings 初始化设置
var c = $.extend({
'widget' : 'input',
'add' : "",
'del' : ""
}, options);
var _this = $(this);
//添加序号为1的输入框组
addInputGroup(1);
/**
* 添加序号为order的输入框组
* @param order 输入框组的序号
*/
function addInputGroup(order) {
//1.创建输入框组
var inputGroup = $("
");
//2.输入框组的序号
var inputGroupAddon1 = $("");
//3.设置输入框组的序号
inputGroupAddon1.html(" " + order + " ");
//4.创建输入框组中的输入控件（input或textarea）
var widget = '', inputGroupAddon2;
if(c.widget == 'textarea') {
widget = $("");
inputGroupAddon2 = $("");
} else if(c.widget == 'input') {
widget = $("");
inputGroupAddon2 = $("");
}
//5.创建输入框组中最后面的操作按钮
var addBtn = $("");
addBtn.appendTo(inputGroupAddon2).on('click', function() {
//6.响应删除和添加操作按钮事件
if($(this).html() == c.del) {
$(this).parents('.input-group').remove();
} else if($(this).html() == c.add) {
$(this).html(c.del);
addInputGroup(order+1);
}
//7.重新排序输入框组的序号
resort();
});
inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
_this.append(inputGroup);
}
function resort() {
var child = _this.children();
$.each(child, function(i) {
$(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
});
}
}
});
Demo案例——InputGroupDemo
目录结构如下：
index.html
输入框组
如果输入框组中的中间控件需要input，则可以设置：
$('.input-group-add').initInputGroup({
'widget' : 'input', //输入框组中间的空间类型
/*'add' : '添加',
'del' : '删除'*/
});
或者不进行设置，因为默认中间控件为input。
中间控件为input的效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
