用jquery 比如点击按钮则增加input框
封面图
•
2025-10-12
•
jQuery
191
0
0
0
你可以使用 jQuery 来实现“点击按钮则增加一个 `<input>` 输入框”的功能。下面是一个简单的示例代码: ### HTML + jQuery 示例 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>添加输入框示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button id="addInputBtn">添加输入框</button> <div id="inputContainer"></div> <script> $(document).ready(function() { $('#addInputBtn').click(function() { // 创建一个新的 input 元素 var newInput = $('<input type="text" placeholder="请输入内容" />'); // 将新输入框添加到容器中 $('#inputContainer').append(newInput); }); }); </script> </body> </html> ``` ### 功能说明: - 点击按钮 `#addInputBtn` 时,会动态生成一个新的 `<input type="text">`。 - 新的输入框会被添加到 `#inputContainer` 容器中。 ### 可选扩展: 如果你想每次添加多个输入框,或者添加带有标签的输入框,可以修改 `newInput` 的创建方式,例如: ```javascript var newInput = $('<label>输入框: </label><input type="text" />'); ``` 或者添加一个删除按钮: ```javascript var newInput = $('<input type="text" /> <button class="removeBtn">删除</button>'); $('#inputContainer').append(newInput); // 删除按钮事件 $('#inputContainer').on('click', '.removeBtn', function() { $(this).parent().remove(); }); ``` 如果你有更具体的需求(比如限制最多添加多少个、清空输入等),也可以告诉我,我可以帮你进一步完善代码。
上一篇:
jquery 设置Img的src
下一篇:
jquery 父窗口 子窗口 相关操作
标题录入,一次不能超过6条
返回顶部
留言
留言
评论