单击按钮时使用 JavaScript 清除多个文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21332488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear multiple textbox using JavaScript on button click
提问by Raghurocks
I working in Asp.net c#. I have a task to clear multiple textboxon button click, but now according to the requirement I have to use JAVASCRIPT. So I can't do that with C#code.
Now I am using the following :
我在Asp.net c#. 我要明确的多任务textbox上button click，但是现在根据我必须使用的要求JAVASCRIPT。所以我不能用C#代码做到这一点。现在我正在使用以下内容：
JAVASCRIPTFunction :
JAVASCRIPT功能：
function clrCtrl() {
document.getElementById('TextBox1').value = "";
}
with this method the line of is greater. Now when I have 20 30 of textbox this code is not efficient so plz give me any suggestion to this....
用这种方法的线更大。现在，当我有 20 30 个文本框时，此代码效率不高，所以请给我任何建议....
回答by Dalorzo
Have you considered using JQUERY? Jquery selectors has different combinations that may help you to more easily reset controls based on CSS classes, control types, using 'likes'.
你考虑过使用JQUERY吗？Jquery 选择器具有不同的组合，可以帮助您更轻松地基于 CSS 类、控件类型、使用“喜欢”重置控件。
http://api.jquery.com/button-selector/
http://api.jquery.com/button-selector/
Here is an example from jquery page:
以下是 jquery 页面的示例：
<input class="myClass" name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
<script>
$( "input[name*='man']" ).val( "has man in it!" );
$( ".myClass" ).val("setting value based on class")
</script>
回答by Raghurocks
Give class name to the text box to which you want to clear then try to use
将类名称指定给要清除的文本框，然后尝试使用
document.getElementsByClassName("MyTestClass")to get elements and use your logic to do whatever you want.
document.getElementsByClassName("MyTestClass")获取元素并使用您的逻辑来做任何您想做的事情。
eg:-
例如：-
function clrCtrl() {
var elements = [] ;
elements = document.getElementsByClassName("MyTestClass");
for(var i=0; i<elements.length ; i++){
elements[i].value = "" ;
}
}
Hope this helps.
希望这可以帮助。
Kind Regards.
亲切的问候。
回答by sumish1985
<html>
<head>
<script>
function funClear() {
document.getElementById("form1").reset();
}
</script>
</head>
<body>
<form id="form1">
Name:<input type="text" id="txt"><br><br>
Email:<input type="text" id="txt"><br><br>
Phone:<input type="text" id="txt"><br><br>
Message:<input type="textarea" height="50" width="70" id="txt"><br><br>
<input type="button" name="clear"value="clear" onclick="funClear()">
</form>
</body>
</html>
回答by Warrenn enslin
if you are using jQuery you could add a style class like textbox to each of your textboxes and then do $('.textbox').val('');you html would look something like
<asp:TextBox runat="server" ID="TextBox" CssClass="textbox" />for each of you text boxes make sure to include CssClass="textbox"
如果您使用的是 jQuery，您可以向每个文本框添加一个像文本框这样的样式类，然后$('.textbox').val('');您的 html 看起来像<asp:TextBox runat="server" ID="TextBox" CssClass="textbox" />每个文本框的样子
，请确保包含CssClass="textbox"
回答by Demurgos
You should gather the input elements you want to clear first, and then just loop on them to erase their content :
您应该先收集要清除的输入元素，然后循环它们以擦除它们的内容：
function clrCtrl() {
var elems = [] ;
elems = elems.concat(document.getElementsByTagName("input"));
elems = elems.concat(document.getElementsByTagName("textarea"));
//and so on
for(var i=0,c=elems.length ; i<c ; i++){
elems[i].value = "" ;
}
}
I would also advice to give a common className to those elements if you want to group them :
如果您想将它们分组，我还建议为这些元素提供一个通用的 className：
function clrCtrl(groupName) {
var elems = [] ;
elems = elems.concat(document.getElementsByTagName("input"));
elems = elems.concat(document.getElementsByTagName("textarea"));
for(var i=0,c=elems.length ; i<c ; i++){
if(elems[i].className==groupName){elems[i].value = "" ;}
}
}
Or if you are targetting only modern browsers, you can use the "getElementsByClassName" method :
或者，如果您仅针对现代浏览器，则可以使用“getElementsByClassName”方法：
function clrCtrl(groupName) {
var elems = document.getElementsByClassName(groupName) ;
for(var i=0,c=elems.length ; i<c ; i++){
elems[i].value = "" ;
}
}
