Use jQuery to add and delete the input-group in the input box group based on Bootstrap, jqueryinput-group

Use jQuery to add and delete the input-group in the input box group based on Bootstrap, jqueryinput-group

This article provides examples to share with you how to use jQuery to add and delete input-group groups. The details are as follows:

Note that you must use the input box Group of the Bootstrap framework, for example:

<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 case:

The self-made plugin inputGroup. js is provided here.

The parameter indicates whether the control in the input box group is a text field or an input box, and the operation content on the right of the input box group.

To use inputGroup. js, you only need to add a selector to the corresponding container, for example, div. Then, use jQuery to obtain the jQuery object corresponding to the selector and call the initInputGroup method.
InputGroup. js

/*** Created by DreamBoy on 2016/4/29. */$ (function () {$. fn. initInputGroup = function (options) {// 1. settings initialization Settings var c =$. extend ({'widget ': 'input', 'add': "<span class = \" glyphicon-plus \ "> </span>", 'del ': "<span class = \" glyphicon-minus \ "> </span>"}, options); var _ this = $ (this ); // Add the addInputGroup (1) to the input box group with the serial number of 1;/*** Add the serial number of the input box group with the serial number of order * @ param order input box group number */function addInputGroup (order) {// 1. create an input box group var inputGroup =$ ("<div class = 'input-group' style = 'margin: 10px 0'> </div>"); // 2. input box group No. var inputGroupAddon1 =1 ("<span class = 'input-group-addon '> </span>"); // 3. set the serial number of the input box group inputGroupAddon1.html ("" + order + ""); // 4. create input controls (input or textarea) var widget = '', inputGroupAddon2; if (c. widget = 'textea ') {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. create the last operation button in the input box group var addBtn =$ ("<button class = 'btn btn-default 'Type = 'click'>" + c. add + "</button>"); addBtn. appendTo (inputGroupAddon2 ). on ('click', function () {// 6. response to the delete and add OPERATION button event if({(this}.html () = c. del) {$ (this ). parents ('. input-group '). remove ();} else if(%(this%.html () = c. add) {signature (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 "2.16.eq(02.16.html ('' + (I + 1) + '');});}}});

Demo case -- InputGroupDemo
The directory structure is as follows:

Index.html

<! DOCTYPE html> 
If the intermediate control in the input box group requires input, you can set:

$ ('. Input-group-add '). initInputGroup ({'widget ': 'input', // The space type in the middle of the input box group/* 'add': 'add', 'del ': 'delete '*/});
Or do not set it because the intermediate control is input by default.
The result of the intermediate control being input is as follows:

The above is all the content of this article, hoping to help you learn.