Example code of implementing checkbox full selection function based on JS

Requirement: The function requires that clicking Select All selects all menus, and clicking Select All again cancels the selection. This feature is often used by users. Below, the editor shares the implementation code with everyone. Let's take a look together!

The effect diagram is as follows:

Before clicking Select All:

After clicking Select All:

After clicking Select All again:

The code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<input type="checkbox" onclick="quanxuan()">Select All 
<input type="checkbox" name="nation">Singing 
<input type="checkbox" name="nation">Dancing 
<input type="checkbox" name="nation">Calligraphy 
</body> 
<script type="text/javascript"> 
var k=0; 
function quanxuan(){ 
var s=document.getElementsByName("nation"); 
if(k%2==0) 
{ 
for(var i=0;i< s.length;i++) 
{ 
s[i].checked=true; 
} 
k++; 
} 
else { 
for(var j=0;j< s.length;j++) 
{ 
s[j].checked=false; 
} 
k++; 
} 
} 
</script> 
</html>

The above-mentioned is an example code for implementing the checkbox full selection function based on JS introduced by the editor to everyone. I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my sincere gratitude to everyone for their support of the Yell Tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial