如何将 2 个或更多参数从 HTML 输入传递到 Javascript 函数答案

【问题标题】：How to pass 2 or more arguments from HTML inputs to a Javascript function如何将 2 个或更多参数从 HTML 输入传递到 Javascript 函数
【发布时间】：2012-07-01 13:47:10
【问题描述】：

我有这些输入：

<input type='radio' id='1' name='s' onclick='pieces(this.value);'  value='6'>6
<input type='radio' id='2' name='s' onclick='pieces(this.value);'  value='12'>12
<input type='radio' id='3' name='s' onclick='pieces(this.value);'  value='24'>24
<input type='radio' id='11' name='v' onclick='pieces(this.value);'  value='yes'>Yes
<input type='radio' id='12' name='v' onclick='pieces(this.value);'  value='no'>No

当单击单选按钮时，我想将“name='s'”中的值传递给 var1，并将“name='v'”中的值传递给 var2 到函数 pieces(var1, var2)。

【问题讨论】：

@arttronics，已编辑。谢谢

标签： javascript html input arguments

【解决方案1】：

对于 2 个输入，这可以通过 JQuery 轻松完成。

va1=$("input[name=s]").val();
va2=$("input[name=v]").val();

然后调用所需的函数，将您的值作为参数传递。

func(va1,va2);

【讨论】：

【解决方案2】：

您可以使用document.getElementsByName() 方法在 Javascript 方法本身中获取两个无线电输入的值，或者这也应该可以工作，
尝试使用func(document.getElementsByName('s'),document.getElementsByName('v'))

下面的代码应该会有所帮助，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert('Ok');
    $('#btn').click(function(){
        var r1=$('input:radio[name=s]').val();
        var r2=$('input:radio[name=v]').val();
        show(r1,r2);
    });
});

function show(r1,r2){
    alert(r1);
    alert(r2);
}
</script>
</head>
<body>
<input type='radio' id='1' name='s' onclick='pieces(this.value);'  value='6'>6
<input type='radio' id='2' name='s' onclick='pieces(this.value);'  value='12'>12
<input type='radio' id='3' name='s' onclick='pieces(this.value);'  value='24'>24


<input type='radio' id='11' name='v' onclick='pieces(this.value);'  value='yes'>Yes
<input type='radio' id='12' name='v' onclick='pieces(this.value);'  value='no'>No

<button id="btn">Submit</button>
</body>
</html>

【讨论】：

您可以更改显示函数以获取值，如下所示，函数 show(){ var r1=$('input:radio[name=s]').val(); var r2=$('input:radio[name=v]').val();警报（r1）；警报（r2）； }
为什么该代码不起作用，我将其应用于 ajax，似乎只有第一个变量 (r1) 获得了价值。 xmlhttp.open('GET','url.php?a1='+r1+'&a2='+r2,true);
@ivory-santos，这个特定的答案要求您选择两个单选按钮，因为从一开始就没有设置任何内容。使用我提供的 jsFiddle 查看之前的评论。干杯！

【解决方案3】：

您可以通过以下不同方式传递参数：

function antguider(name, url){
    alert("Name = "+name+" URL = "+url);
}

HTML 部分

<input type="button" onclick=antguider('AntGuider','http://antguider.blogspot.com') value="Click Without Quotation" />
<input type="button" onclick="antguider('AntGuider','http://antguider.blogspot.com')" value="Click With Quotation" />
<input type="button" onclick="antguider(12345,'http://antguider.blogspot.com')" value="No Quotation Needed For Button" />

【讨论】：

第一个 onclick 属性缺少双引号。此标记不会 validate 并可能导致解析问题。
如果您提到在元素标签中使用onclick，而第一个input button 没有引号，请提供。谢谢。
在没有引号的 HTML 属性中也可以使用。引用用于分组。示例）title="Click Event" 将起作用，并且 title=Click Event 将仅采用第一个值（Click）。也就是说，如果一个单词不包含空格，则不需要引号。
那么为什么您的非间隔 onclick 无法通过 W3C 验证？好的，我刚刚找到了一篇很棒的文章，描述了您的答案以及验证失败的原因。 +1 以获得很好的答案！参考：article
这样使用不是正确的方法。但它适用于所有主要浏览器。