search

Home >Web Front-end >JS Tutorial >JS checkbox control operation code_form effects

JS checkbox control operation code_form effects

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 18:57:39968browse

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

Example 2:
The function to be implemented is shown in the figure:
The js code of the all-selected checkbox is as follows:
var status=true;
function allselect(){
var tags=document.getElementsByTagName("input" );
for (i = 0; i < tags.length; i )
{
if (tags[i].type == "checkbox")
{
tags[ i].checked=status;
}
}
status=!status;
}
When you click to display the position, apply for the selected position, and put it in your favorites, the js code is as follows:
function panduan(){
var gou=0;
var tags=document.getElementsByTagName("input");
for (i = 0; i < tags.length; i )
{
if (tags[i].type == "checkbox")
{
if(tags[i].id!="Checkbox1"){ //Checkbox1 here is a checkbox that selects all
if(tags[i].checked==true){
gou ;
}
}
}
}
if(gou==0){
window.alert("Please tick the selected position!");
return false;
}
} Example 3:

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

By the way, take a look at the usage of getElementsByTagName
Javascript provides us with two ways to obtain document references: getElementById and getElementsByTagName. The former returns a reference to an element with the specified Id attribute, while the latter returns an array of elements with the tag. The former is more commonly used and is also a comparison For those who are familiar with it, this article briefly explains the latter.
For example: define a table with multiple td tags, and now you need to change the background color of the second cell, you can use getElementsByTagName. The specific code is as follows:
...
< ;table style="width:100%;">
1
2
3< /td>


4
5
6< ;/td>


7
8
9


......
var tdObject=document.getElementsByTagName("td").item(1); tdObject.style.backgroundColor="blue"; ......
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The difference between the usage of document.all and getElementById, getElementsByName, getElementsByTagNameNext article：The difference between the usage of document.all and getElementById, getElementsByName, getElementsByTagName

Related articles

See more