jQuery实现动态添加、删除按钮及input输入框的方法
2017-04-27 14:49
1146 查看
本文实例讲述了jQuery实现动态添加、删除按钮及input输入框的方法。分享给大家供大家参考,具体如下:
<html> <head> <meta charset="utf-8"> <title>动态创建按钮</title> <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script> </head> <body> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type='button' value='删除'></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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type="button" value="删除"></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> </body> </html>
运行效果图如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jquery实现input输入框实时输入触发事件代码
- js与jquery实时监听输入框值的oninput与onpropertychange方法
- input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
- jquery清空textarea等输入框实现代码
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- jquery实现textarea输入框限制字数的方法
- Jquery动态添加输入框的方法
- jQuery表单获取和失去焦点输入框提示效果的实例代码
- 基于jquery实现一张图片点击鼠标放大再点缩小
- jQuery div层的放大与缩小简单实现代码
- jQuery实现输入框的放大和缩小功能示例
相关文章推荐
- JQuery实现动态添加删除评论的方法
- jquery 动态添加、按顺序添加input文本框并且实现删除操作
- javascript动态添加、删除按钮和input输入框
- jquery 动态添加、按顺序添加input文本框并且实现删除操作
- jQuery实现表格行和列的动态添加与删除方法【测试可用】
- jQuery实现动态添加删除输入框
- Jquery动态添加 删除 操作实现
- 浏览器后退按钮导致jquery动态添加的select option值丢失的解决方法
- js动态修改input输入框的type属性(实现方法解析)
- js实现对table动态添加、删除和更新的方法
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少,大多用在Form里
- js动态修改input输入框的type属性(实现方法解析)
- jQuery使用toggleClass方法动态添加删除Class样式的方法
- Jquery实现动态添加按钮
- js实现对table动态添加、删除和更新的方法
- jQuery动态添加、删除元素的方法