基于Bootstrap使用jQuery实现输入框组input-group的添加与删除

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作，供大家参考，具体内容如下

注意这里要求使用到Bootstrap框架的输入框组，如：

Box" aria-label="...">
dio" aria-label="...">

Demo案例的效果图：

这里提供自制的 插件 inputGroup.js

参数为可以设置 输入框组中中间的控件是文本域还是输入框；以及设置在输入框组右侧的操作的内容。

使用inputGroup.js只要在对应的容器，如div中添加选择器，然后使用jQuery获取该选择器对应的jQuery对象，调用 initInputGroup方法即可。 inputGroup.js

",'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

<Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 输入框组 /*.input-group-add .input-group { margin: 10px 0; }*/