javascript 单选按钮在javascript函数中产生未定义的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3739051/
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
Radio Button producing undefined value in javascript function
提问by shinjuo
I am trying to send the value of a radio button to a javascript function. Eventually the function will do more but my testing it has come to a dead end because I keep getting a returned value of undefined. Here is what I have:
我正在尝试将单选按钮的值发送到 javascript 函数。最终该函数会做更多的事情，但我的测试已经走到了尽头，因为我不断得到未定义的返回值。这是我所拥有的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<SCRIPT TYPE="text/javascript">
<!--
function jobWindow(){
var target;
for( i = 0; i < document.jobView.sales.length; i++ ){
if( document.jobView.sales[i].checked == true )
target = document.jobView.sales[i].value;
break;
}
alert( "val = " + target );
//var load = window.open('target','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
// -->
</script>
</head>
<body>
<form name="jobView">
<input name ="sales" value="all" type="radio" />All
<input name="sales" value="darell" type="radio" />Darell
<input name="sales" value="kevin" type="radio" />Kevin
<input name="sales" value="brad" type="radio" />Brad
<input name="sales" value="chongo" type="radio" />Chongo
<input type="button" value="View Records" onclick="jobWindow()"/>
<input type="button" value="View Calendar" />
</form>
</body>
</html>
回答by Stan Rogers
The access path you actually want is:
您实际想要的访问路径是：
var el = document.forms["jobView"].elements["sales"];
The straight dot chain (document.jobView.sales) makes an implicit call to the "all" collection, which will only work in IE. (Yes, I know that Firefox returns an identical-looking string in its error console when things go wrong, but you can't actually use it in your own code.) getELementsByTagName() and getElementsByName() will work just fine, but then you need to ensure that the elements in the returned collection are the ones you actually want. (Assume that a time will come when you want to create more than one form on the page, and that field names will collide. It will never happen, of course, unless you fail to make that assumption out of the gate, whereupon another developer will immediately add a second form to the page you just committed.)
直点链（document.jobView.sales）对“all”集合进行了隐式调用，该集合仅适用于 IE。（是的，我知道 Firefox 会在出错时在其错误控制台中返回一个外观相同的字符串，但实际上您不能在自己的代码中使用它。） getELEmentsByTagName() 和 getElementsByName() 可以正常工作，但随后您需要确保返回的集合中的元素是您真正想要的元素。（假设有一天你想在页面上创建多个表单，并且字段名称会发生冲突。当然，这永远不会发生，除非你没有做出这个假设，然后另一位开发人员将立即向您刚刚提交的页面添加第二个表单。）
回答by Sarfraz
Try with document.getElementsByTagNamelike this:
document.getElementsByTagName像这样尝试：
function jobWindow(){
var myvalue;
var el = document.getElementsByTagName('input');
for( i = 0; i < el.length; i++ ){
if (document.forms['jobView'].el[i].type === 'radio' && document.forms['jobView'].el[i].name === 'sales')
{
if(document.forms['jobView'].el[i].checked == true )
{
myvalue = document.forms['jobView'].el[i].value;
break;
}
}
}
alert( "val = " + myvalue );
}
Note also that your breakline never executed because you were missing curly brackets:
另请注意，您的break行从未执行过，因为您缺少大括号：
if( document.jobView.sales[i].checked == true )
{
target = document.jobView.sales[i].value;
break;
}
回答by Vinay B R
change document.jobView.salesto document.getElementsByName('sales')
将document.jobView.sales更改为document.getElementsByName('sales')
回答by Purge
throw some debugging in there. for example put an alert() inside the for() statement to make sure it is getting a definition for document.jobView.sales.length.
在那里进行一些调试。例如，在 for() 语句中放置一个 alert() 以确保它获得了 for 的定义document.jobView.sales.length。
If it doesn't make the alert, you can almost bet document.jobView.sales.lengthis undefined.
如果它没有发出警报，您几乎可以打赌document.jobView.sales.length是未定义的。
You can then do try { var length = document.jobView.sales.length; } catch(e) { alert(e); }to verify this.
然后您可以try { var length = document.jobView.sales.length; } catch(e) { alert(e); }验证这一点。
If you verify that document.jobView.sales.lengthisn't being defined, you may have to use document.getElementsByTagName, and loop through them instead of document.jobView
如果您确认document.jobView.sales.length未定义，则可能必须使用document.getElementsByTagName, 并遍历它们而不是document.jobView
