First, let’s take a look at an example:
The code copy is as follows:
<form name="buyerForm" method="post" action="/mysport/control/user/list.do">
<input type="checkbox" id="usernames" value="testtest" >testtest<br>
<input type="checkbox" name="usernames" value="testtest" >testtest<br>
<input type="text" id="usernames" value="testtest" >testtest<br>
</form>
document.forms[0] When there is a form form or multiple form forms in the HTML page, it returns a form array of NodeList type.
document.forms[0].usernames, here usernames can be the value of id or name, where these two attributes are equivalent. Moreover, it does not distinguish whether a component is a text box, a radio box, or a check box.
At this time, we need to distinguish between two situations .
When an input id or name is 'usernames', document.forms[0].usernames returns a specific input component. If it is operated, it must be used according to the specific component operation method.
At this time, alert(document.forms[0].usernames.length) returns undefined because the input component does not have the length property.
When there are two or more input ids or name 'usernames', document.forms[0].usernames returns NodeList array. At this time,
alert(document.forms[0].usernames.length) will return the length of the array. In the above example, the return value is 3.
Therefore, when using js to select all, consider the situation where there are one and multiple check boxes of the same name.
The code copy is as follows:
function allSelect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//When there are two or more checkbox names that are usernames, the length of the array is returned
//When there is a checkbox name that is usernames, form.usernames returns a checkbox object, not an array, so its length property is undefined
if(length){ //In javascript, as long as the judged condition is 0, null, or undefined, it is considered false, and other cases are considered true
for(var i=0;i<length;i++){
form.usernames[i].checked=state;
}
}
else{
form.usernames.checked=state;
}
}
There is a component id of 'usernames' or multiple component ids are 'usernames', document.getElementById('usernames') returns the value returned by a form component. When multiple component ids are 'usernames', the first component id is 'usernames'.
There is a component name 'usernames' or multiple component names 'usernames', document.getElementsByName() returns HTMLCollection array. Note the difference from document.getElementsByTagName(), which gets the array according to the tag category.
var names = document.getElementsByTagName("usernames"), alert(names[0]) The result returned here is undefined. I used to mix byName with byTagName, and no tag starts with usernames. <usernames value=''></usernames> This does not exist.
However, the return of getElementsByTagName is still an array collection, which does not contain any content, names[0] does not exist, so the return is undefined, because when the array range is exceeded, the undefined value pops up.
var test = {'0','1','2',};alert(test[3]); returns undefined.