jquery无刷新添加和删除input输入框增加减少input框

旧城等待， 2022-06-15 10:30 235阅读 0赞

**一、页面代码**

<a href="#" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>  
    <div id="InputsWrapper">  
    <div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" class="removeclass">×</a></div>  
    </div>

**二、脚本**

<script>  
        $(document).ready(function() {  
          
        var MaxInputs       = 8; //maximum input boxes allowed  
        var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID  
        var AddButton       = $("#AddMoreFileBox"); //Add button ID  
          
        var x = InputsWrapper.length; //initlal text box count  
        var FieldCount=1; //to keep track of text box added  
          
        $(AddButton).click(function (e)  //on add input button click  
        {  
                if(x <= MaxInputs) //max input box allowed  
                {  
                    FieldCount++; //text box added increment  
                    //add input box  
                    $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">×</a></div>');  
                    x++; //text box increment  
                }  
        return false;  
        });  
          
        $("body").on("click",".removeclass", function(e){ //user click on remove text  
                if( x > 1 ) {  
                        $(this).parent('div').remove(); //remove text box  
                        x--; //decrement textbox  
                }  
        return false;  
        })   
          
        });  
        </script>

原文转载至：http://www.freejs.net/article\_biaodan\_278.html

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 input框只能输入整数

input type="text" name="number" id="number" value="" οnkeypress="click(event)" class...

痛定思痛。/ 2024年04月19日 14:53/ 0 赞/ 99 阅读

相关文本输入框＜input＞

(1)创建文本输入框文本输入框是获取用户输入的一种方便的方法。 `<input>` 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种

小咪咪/ 2024年03月29日 15:46/ 0 赞/ 138 阅读

相关十七.输入框 input

input > 输入框。该组件是原生组件。一.所有属性 <table> <thead> <tr> <th>属性</th> <th>类型

亦凉/ 2023年07月09日 02:21/ 0 赞/ 20 阅读

相关 js input输入框校验

只能输入英文 <input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文

比眉伴天荒/ 2022年10月01日 07:55/ 0 赞/ 242 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 355 阅读

相关 jquery无刷新添加和删除input输入框增加减少input框

一、页面代码 <a href="" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a

旧城等待，/ 2022年06月15日 10:30/ 0 赞/ 236 阅读

相关控制input框输入数字

1.只能输入正整数 <input type="text" οnkeyup="if(this.value.length==1){this.value=this.val

男娘i/ 2022年05月25日 07:21/ 0 赞/ 346 阅读

相关 bootstrap基于JS动态添加、删除、获取input输入框

这段代码支持动态添加、删除，bootstrap里面还有更简单的实现动态效果，我这里是需要做一些特殊的处理才使用这样的方式的，复制粘贴的时候记得把<div>里面的代码改了。

「爱情、让人受尽委屈。」/ 2022年05月13日 08:08/ 0 赞/ 1057 阅读

相关 Form-input输入框

1、基本使用 v-model：绑定的值，string / number size：指定输入框的尺寸，除了默认的medium大小外，还提供了 large、small 和 mi

你的名字/ 2022年03月31日 19:11/ 0 赞/ 492 阅读

相关 input 输入框限制

只能输入数字和一个小数点转自： https://www.jianshu.com/p/c26bfb0dfd8d <label> 　　<input id="t

红太狼/ 2021年12月23日 00:23/ 0 赞/ 443 阅读