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

网络编程 2025/12/23 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

本文实例为大家分享使用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="/UploadFiles/2021-04-02/html5shiv.js">

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




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



或者不进行设置，因为默认中间控件为input。

中间控件为input的效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助。

Bootstrap,jQuery,输入框组,input-group,添加,删除

标签：

Bootstrap,jQuery,输入框组,input-group,添加,删除

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

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

暂无评论...

www.bzswh.com 幽灵资源网

143,552互联网资源

29,117高清电影

46,608技术教程

224,608站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

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

Bootstrap,jQuery,输入框组,input-group,添加,删除

小白谈谈对JS原型链的理解

JQuery的Pager分页器实现代码

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接