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

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

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

<div class="row">
 <div class="col-lg-6">
 <div class="input-group">
  <span class="input-group-addon">
  <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
 </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
 <div class="col-lg-6">
 <div class="input-group">
  <span class="input-group-addon">
  <input type="radio" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
 </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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' : "<span class=\"glyphicon glyphicon-plus\"></span>",
   'del' : "<span class=\"glyphicon glyphicon-minus\"></span>"
  }, options); 

  var _this = $(this); 

  //添加序号为1的输入框组
  addInputGroup(1); 

  /**
   * 添加序号为order的输入框组
   * @param order 输入框组的序号
   */
  function addInputGroup(order) {
   //1.创建输入框组
   var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");
   //2.输入框组的序号
   var inputGroupAddon1 = $("<span class='input-group-addon'></span>");
   //3.设置输入框组的序号
   inputGroupAddon1.html(" " + order + " "); 

   //4.创建输入框组中的输入控件（input或textarea）
   var widget = '', inputGroupAddon2;
   if(c.widget == 'textarea') {
    widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");
    inputGroupAddon2 = $("<span class='input-group-addon'></span>");
   } else if(c.widget == 'input') {
    widget = $("<input class='form-control' type='text'/>");
    inputGroupAddon2 = $("<span class='input-group-btn'></span>");
   } 

   //5.创建输入框组中最后面的操作按钮
   var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
   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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>输入框组</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
 <style>
  /*.input-group-add .input-group {
   margin: 10px 0;
  }*/
 </style> 

 <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->
 <!--[if lt IE 9]>
 <script src="js/html5shiv.js"></script>
 <script src="js/respond.min.js"></script>
 <![endif]-->
</head>
<body>
 <div class="container">
  <div class="input-group-add">
   <!--<div class="input-group">
    <span class="input-group-addon"> 1 </span>
    <!–<input type="text" class="form-control" aria-label="...">–>
    <textarea class="form-control"></textarea>
    <span class="input-group-addon">
     <button class="btn btn-default" type="button"> + </button>
    </span>
   </div>-->
  </div>
 </div> 

 <script src="js/jquery-1.11.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="inputGroup.js"></script>
 <script>
  $(function() {
   $('.input-group-add').initInputGroup({
    'widget' : 'textarea', //输入框组中间的空间类型
    /*'add' : '添加',
    'del' : '删除'*/
   });
  });
 </script>
</body>
</html>

如果输入框组中的中间控件需要input，则可以设置：

$('.input-group-add').initInputGroup({
    'widget' : 'input', //输入框组中间的空间类型
    /*'add' : '添加',
    'del' : '删除'*/
   });

或者不进行设置，因为默认中间控件为input。
中间控件为input的效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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