首页>>表单>>jquery无刷新添加和删除input输入框 增加减少input框(2014-02-28)

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

jquery无刷新添加和删除input输入框 增加减少input框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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

 

JavaScript Code
  1. <script>  
  2. $(document).ready(function() {  
  3.   
  4. var MaxInputs       = 8; //maximum input boxes allowed  
  5. var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID  
  6. var AddButton       = $("#AddMoreFileBox"); //Add button ID  
  7.   
  8. var x = InputsWrapper.length; //initlal text box count  
  9. var FieldCount=1; //to keep track of text box added  
  10.   
  11. $(AddButton).click(function (e)  //on add input button click  
  12. {  
  13.         if(x <= MaxInputs) //max input box allowed  
  14.         {  
  15.             FieldCount++; //text box added increment  
  16.             //add input box  
  17.             $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">×</a></div>');  
  18.             x++; //text box increment  
  19.         }  
  20. return false;  
  21. });  
  22.   
  23. $("body").on("click",".removeclass", function(e){ //user click on remove text  
  24.         if( x > 1 ) {  
  25.                 $(this).parent('div').remove(); //remove text box  
  26.                 x--; //decrement textbox  
  27.         }  
  28. return false;  
  29. })   
  30.   
  31. });  
  32. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_278.html