本文实例讲述了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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行
- 黑神话悟空上品蝎太子精魄获取方法一览|上品蝎太子精魄收集攻略
- 银霞.1977-《台北66电影原声带》台湾复刻版[WAV+CUE]
- 银霞.1980-《你那好冷的小手》台湾珍藏纪念版[WAV+CUE]
- 王菲.2006《菲常好听》引进版[低速原抓WAV+CUE]
- 《三日危情独家的记忆》女角色介绍
- 《天国拯救》拉泰比武大会攻略
- 任天堂推出《马里奥惊奇》NS捆绑包 10月24日发售
- 《孤岛惊魂》能否逆转育碧颓势?曝系列新作正招兵买马
- 天命人呼叫战术轰炸!玩家自制《黑神话:悟空》轰炸机Mod
- 群星.1992-滚石九大天王·十二出好戏【滚石】【WAV+CUE】
- 群星.1994-新滚石九大天王之年度大丫滚石】【WAV+CUE】
- 坣娜.1998-别恋【非常喜】【WAV+CUE】