<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="input-group-add">
</div>
<button type="button" class="btn btn-primary" id="testV">获取input数组</button>
</div>
<script>
$('#testV').click(function() {
var arr = [];
$("input[name='data[]']").each(function() {
arr.push($(this).val());
})
console.log(arr);
});
$(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>",
field: '',
data: []
}, options);
var _this = $(this);
//添加序号为1的输入框组
addInputGroup(1);
/**
* 添加序号为order的输入框组
* @param order 输入框组的序号
* @param data 初始化输入框组中的数据
*/
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>");
widget.html(c.data[order - 1]);
inputGroupAddon2 = $("<span class='input-group-addon'></span>");
} else if (c.widget == 'input') {
widget = $("<input class='form-control' type='text'/>");
widget.val(c.data[order - 1]);
inputGroupAddon2 = $("<span class='input-group-btn'></span>");
}
//5.设置表单提交时的字段名
if (c.field.length == 0) {
widget.prop('name', c.widget + 'Data[]');
} else {
widget.prop('name', c.field + '[]');
}
//6.创建输入框组中最后面的操作按钮
var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");
addBtn.appendTo(inputGroupAddon2).on('click', function() {
//7.响应删除和添加操作按钮事件
if ($(this).html() == c.del) {
$(this).parents('.input-group').remove();
} else if ($(this).html() == c.add) {
$(this).html(c.del);
addInputGroup(order + 1);
}
//8.重新排序输入框组的序号
resort();
});
inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);
_this.append(inputGroup);
if (order + 1 > c.data.length) {
return;
}
addBtn.trigger('click');
}
function resort() {
var child = _this.children();
$.each(child, function(i) {
$(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');
});
}
}
});
$(function() {
$('.input-group-add').initInputGroup({
'widget': 'input', //输入框组中间的空间类型
// 'add' : '添加',
// 'del' : '删除',
'field': 'data',
'data': ['haha', 'hello', 'hi', 'dj']
});
});
</script>
</body>
</html>
bootstrap dynamic inputGroup
最新推荐文章于 2021-10-20 16:01:53 发布