<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script type='text/javascript'>
function allSelect(){
var form = document.forms[0];
alert(form);
var state = form.allselectbox.checked;
alert(state);
var length = form.usernames.length;
alert(form.usernames.length);
}
</script>
<BODY>
<form name="buyerForm" method="post" action="/mysport/control/user/list.do">
<input type="checkbox" name="usernames" value="testtest">testtest<br>
<input type="checkbox" onclick="javascript:allSelect()" name="allselectbox">ȫѡ
</form>
</BODY>
</HTML>上边的HTML中，应该是数组长度是1吧，那不有一个名为usernames的复选框吗？为什么最后弹出的却是undefined？
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script type='text/javascript'>
function allSelect(){
var form = document.forms[0];
alert(form);
var state = form.allselectbox.checked;
alert(state);
var length = form.usernames.length;
alert(form.usernames.length);
}
</script>
<BODY>
<form name="buyerForm" method="post" action="/mysport/control/user/list.do">
<input type="checkbox" name="usernames" value="testtest">testtest<br>
<input type="checkbox" onclick="javascript:allSelect()" name="allselectbox">ȫѡ
</form>
</BODY>
</HTML>上边的HTML中，应该是数组长度是1吧，那不有一个名为usernames的复选框吗？为什么最后弹出的却是undefined？
改为：
<input type="checkbox" id="usernames" name="usernames" value="testtest">
按照你的说法改了，可是还是弹出的是undefined，如果有两个或者两个以上的单选框，就会弹出真是的数目，
但是就是一个单选框的时候，弹出的是undefined，在IE和火狐浏览器里都是这样的。
按照你的说法改了，可是还是弹出的是undefined，如果有两个或者两个以上的单选框，就会弹出真是的数目，
但是就是一个单选框的时候，弹出的是undefined，在IE和火狐浏览器里都是这样的。
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script type='text/javascript'>
function allSelect(){
var form = document.forms[0];
alert(form);
var state = form.usernames[1].checked;
alert(state);
var length = form.usernames.length;
alert(form.usernames.length);
}
</script>
<BODY>
<form name="buyerForm" method="post" action="/mysport/control/user/list.do">
<input type="checkbox" name="usernames" value="testtest">testtest<br>
<input type="checkbox" onclick="javascript:allSelect()" name="usernames">aa
</form>
</BODY>
</HTML>ok了。。
可能之前理解错你的意思，你是想要同时所有同名单选框的数组？如果是这样的话，你应该要用 getElementsByName("usernames");之前直接用 form.usernames 这种方式，引用的是控件ID，此外如果只有一个ID的话，会直接返回这个控件对象。
请问，你为什么要这么改啊，原理是什么啊？
我反复的测试，发现好像当只有一个复选框名为usernames时候，form.usernames返回的是InputElement类型的对象，所以其length属性是undefined。而当有两个或者两个以上的名为usernames的复选框的时候，返回的是对象的数组，所以其length属性就能有具体的值了。
我经过很多次的测试，发现无论是id还是name如果为usernames的时候，都会返回到那个对象数组中，而只有一个复选框的时候，返回的是InputElement对象。
还有，那个方法是document.getElementsByTagName()与getElementsByName()有什么不同的地方呢？
我对原来的那个页面做测试的时候发现，即使有两个复选框全部名为usernames,
alert(document.getElementsByTagName("usernames")[0]);返回的依然是undefined
alert(typeof form.usernames);
你看看这样可以看到这个form.usernames对象的类型为object而不是array
而这个object是一个htmlelement对象,
要这样才对
alert(form.usernames.value.length);
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title> new document </title>
</head><style type="text/css">
label { padding-left:8px; }
</style><script type='text/javascript'>
/**
* 事件处理工具类
*/
var Event = {};Event = { /**
* 为 element 使用 handler 处理程序添加至 event 事件
* 兼容 IE 及 Firefox 等浏览器
*
* 例如为 botton 对象添加 onclick 事件，使用 clickEvent
* 方法作为处理程序：
* Event.addEvent(botton, 'click', clickEvent);
*
* @param element 需要添加事件的对象（Object）
* @param event 需要添加的事件名称（String），不加“on”
* @param handler 需要添加的方法引用（Function）
*/
addEvent : function( element, event, handler ) {
if( element.attachEvent ) {
element.attachEvent( 'on' + event, handler );
} else if ( element.addEventListener ) {
element.addEventListener( event, handler, false );
} else {
element['on' + event] = handler;
}
}, addEventHandler : function( element, event, object, handler ) {
var args = [];
object = object || window;
for(var i = 4; i < arguments.length; i++) {
args.push( arguments[i] );
}
Event.addEvent( element, event, function() {
handler.apply( object, args );
});
}
};var SelectAll = function(names, all) {
this.names = function () {
if (typeof names !== 'string') return [];
var object = document.getElementsByName( names );
if (typeof object === 'object' && object.length) return object;
return [];
}();
this.all = (typeof all === 'string') ? document.getElementById(all) : {};
};SelectAll.prototype = { bind : function() {
this._allBind.call( this );
this._subBind.call( this );
}, _allBind : function() {
Event.addEventHandler( this.all, 'click', this, this._allCheckedEvent );
}, _subBind : function() {
this._each(function( element ) {
Event.addEventHandler( element, 'click', this, this._subCheckedEvent );
});
}, _allCheckedEvent : function() {
var checked = !!this.all.checked;
this._each(function( element ) {
element.checked = checked;
});
}, _subCheckedEvent : function() {
var checked = true;
this._each(function( element ) {
checked &= !!element.checked;
});
this.all.checked = checked;
}, _each : function( callback ) {
for (var i = 0, k = this.names.length; i < k; i++) {
callback.call(this, this.names[i], i, this.names);
}
}
};window.onload = function() {
var select = new SelectAll('usernames', 'allselectbox');
select.bind();
}</script><body>
<form name="buyerForm" method="post" action="/mysport/control/user/list.do" id="buyer">
<input type="checkbox" name="usernames" value="a" id="un-a"><label for="un-a">username a</label><br />
<input type="checkbox" name="usernames" value="b" id="un-b"><label for="un-b">username b</label><br />
<input type="checkbox" name="usernames" value="c" id="un-c"><label for="un-c">username c</label><br />
<input type="checkbox" name="usernames" value="d" id="un-d"><label for="un-d">username d</label><br />
<input type="checkbox" name="usernames" value="e" id="un-e"><label for="un-e">username e</label><br />
<input type="checkbox" name="usernames" value="f" id="un-f"><label for="un-f">username f</label><br />
<input type="checkbox" id="allselectbox" /><label for="allselectbox">all select</label>
</form>
</body></html>
只有一个是Object对象，没有Length属性
二个以上才是数组
function allSelect(){
var state = document.getElementsByName("usernames")
var sum=0
for(var i=0;i<state.length;i++)
{
if(state[i].checked)
{
sum=sum+1
}
}
var aa=sum
alert(aa);
}
</script>这样就行了
document.getElementsByTagName是根据标签名字来获取对象数组.
document.getElementsByName是根据标签name属性的值获取对象数组.
换句话说document.getElementsByTagName的参数应该为标签类型.比如说"input"比如说"textarea"比如说 "a".
你使用document.getElementsByTagName("usernames")时, 你的页面并没有<usernames></usernames>这样子的标签.所以返回的是undefined.
另外当页面上你只定义了一个name属性为usernames的标签时. 你使用document.usernames来获取的就是该对象, 所以你.length的时候会是undefined, 而当你定义多个相同名称的标签时, 返回的才是array.这个时候你的.length才能正确获取到值.
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script type='text/javascript'>
function allSelect(){
var checkboxname =document.getElementsByName("usernames");
alert(checkboxname.length);
for(var i=0;i<checkboxname.length;i++){
if(checkboxname[i].checked!=true){
checkboxname[i].checked=true;
}
}
}
</script>
<BODY>
<form name="buyerForm" method="post" action="">
<input type="checkbox" name="usernames" value="testtest">testtest<br>
<input type="checkbox" name="usernames" value="testtest1">testtest1<br>
<input type="checkbox" name="usernames" value="testtest2">testtest2<br>
<input type="checkbox" name="usernames" value="testtest3">testtest3<br><input type="checkbox" onclick="allSelect()" name="allselectbox">ȫѡ</form>
</BODY>
</HTML>