Example code of javascript select all/unselect all operation in html

Example code of javascript select all/unselect all operation in html

Copy code
The code is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function selectAllDels()
{
var allCheckBoxs = document.getElementsByName("preDelCheck");
var desc = document.getElementById("allChecked");
var selectOrUnselect=false;
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
if(allCheckBoxs[i].checked){
selectOrUnselect=true;
break;
}
}
if (selectOrUnselect)
{
_allUnchecked(allCheckBoxes);
}else
{
_allchecked(allCheckBoxes);
}
}
function _allchecked(allCheckBoxes){
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = true;
}
}
function _allUnchecked(allCheckBoxes){
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = false;
}
}
</script>
</head>
<body>
<p>test</p>
<form>
<input type="checkbox" name="preDelCheck" value="cream">ID1

<input type="checkbox" name="preDelCheck" value="sugar" >ID2

<input type="checkbox" name="preDelCheck" value="sugar">ID3

<input type="checkbox" name="preDelCheck" value="sugar">ID4

<input type="checkbox" name="preDelCheck" value="sugar">ID5

<input type="button" id="allChecked" value="Select all/Unselect all" onClick="selectAllDels()">
</form>
</body>
</html>

<<:  How to install and deploy zabbix 5.0 for nginx

>>:  Detailed explanation of single-row function code of date type in MySQL

Recommend

Detailed explanation of installing applications in Linux Centos7 without Internet connection

1. In the previous chapter, we learned that we ca...

A permanent solution to MYSQL's inability to recognize Chinese

In most cases, MySQL does not support Chinese whe...

10 very good CSS skills collection and sharing

Here, clever use of CSS techniques allows you to g...

Windows Server 2008 Tutorial on Monitoring Server Performance

Next, we will learn how to monitor server perform...

Forever+nginx deployment method example of Node site

I recently bought the cheapest Tencent cloud serv...

Detailed analysis of classic JavaScript recursion case questions

Table of contents What is recursion and how does ...

Use of CSS3's focus-within selector

Pseudo-elements and pseudo-classes Speaking of th...

js realizes the magnifying glass effect of shopping website products

This article shares the specific code of js to ac...

Detailed steps for installing and configuring MySQL 8.0 on CentOS 7.4 64-bit

Step 1: Get the MySQL YUM source Go to the MySQL ...

The difference between html, xhtml and xml

Development Trends: html (Hypertext Markup Languag...

How to submit a pure HTML page, pass parameters, and verify identity

Since the project requires a questionnaire, but th...

Javascript closure usage scenario principle detailed

Table of contents 1. Closure 2. Closure usage sce...

The three new indexes added in MySQL 8 are hidden, descending, and functions

Table of contents Hidden, descending, and functio...

CSS Tricks to Create Wave Effects

It has always been very difficult to achieve wave...

What does the "a" in rgba mean? CSS RGBA Color Guide

RGBA is a CSS color that can set color value and ...