Use JavaScript to complete all or none of the check boxes

Select all or none of the check boxes

requirement analysis

In the commodity classification interface, when we click the select all box, we want to select all the commodities. When we cancel, we want to uncheck all the commodities

technical analysis

checked="checked" select the check box

Event: onclick click event

getElementsByTagName: returns the list of nodes (collection / node array) that contain all elements with the specified tag name.
getElementsByName: returns a list of nodes containing all elements with the specified class name.

Step analysis

Step analysis of select all and select none:

1. Confirm event: onclick single machine event
2. Event trigger function: checkAll()
3. Functions do some things:
Get the status of the current first checkbox
Get checkbox es for all categories
Modify the status of each checkbox

code implementation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. Identify events: Document loading completed onload
			2. Event to trigger function: init()
			3. function:Elements of the action page
					//To manipulate each row in a table
					//Dynamic background color of modified row
		-->
		<script >
			function init(){
				//Get the table
				var tab = document.getElementById("tab");
				//Get each row in the table
				var rows = tab.rows;
				//Facilitate all rows, then according to odd even
				for(var i=1; i < rows.length; i++){
					var row = rows[i];  //Get a line
					if(i%2==0){
						row.bgColor = "yellow";
					}else{
						row.bgColor = "red"
					}
				}
			}
			
			/*
				Step analysis of select all and select none:
				 1.Determine event: onclick stand-alone event
				 2.Event trigger function: checkAll()
				 3.The function does something:
				 	Get the status of the current first checkbox
				 	Get checkbox es for all categories
				 	Modify the status of each checkbox
			*/
			
			function checkAll(){
//				Get the status of the current first checkbox
				var check1 = document.getElementById("check1");
				//Get the current checked status
				var checked = check1.checked;
//				 	Get checkbox es for all categories
//				var checks = document.getElementsByTagName("input");
				var checks = document.getElementsByName("checkone");
//				alert(checks.length);
				for(var i = 0; i < checks.length; i++){
//				 	Modify the status of each checkbox
					var checkone = checks[i];
					checkone.checked = checked;
				}
			}
		</script>
	</head>
	<body onload="init()">
		<table border="1px" width="600px" id="tab">
			<tr >
				<td>
					<input type="checkbox" onclick="checkAll()" id="check1" />
				</td>
				<td>classification ID</td>
				<td>Classification name</td>
				<td>Classified Goods</td>
				<td>Classification description</td>
				<td>operation</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone" />
				</td>
				<td>1</td>
				<td>Mobile digital</td>
				<td>HUAWEI,millet,Nikon</td>
				<td>Black horse digital products have the best quality</td>
				<td>
					<a href="#">modify</a>|<a href="#"> delete</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>2</td>
				<td>adult erotica products</td>
				<td>Inflatable</td>
				<td>Here's the inflatable electric silicone</td>
				<td><a href="#">modify</a>|<a href="#"> delete</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>3</td>
				<td>Computer office</td>
				<td>association,millet</td>
				<td>Notebook sale</td>
				<td><a href="#">modify</a>|<a href="#"> delete</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>4</td>
				<td>Greedy snacks</td>
				<td>Spicy strips,Hemp flowers,cucumber</td>
				<td>Special purchases for the Spring Festival</td>
				<td><a href="#">modify</a>|<a href="#"> delete</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="checkone"/>
				</td>
				<td>5</td>
				<td>bedding article</td>
				<td>Sheet,Quilt cover,Four piece suit</td>
				<td>It's all condoms</td>
				<td><a href="#">modify</a>|<a href="#"> delete</a></td>
			</tr>
		</table>
	</body>
</html>

Tags: Javascript Mobile Spring

Posted on Wed, 06 May 2020 11:07:57 -0400 by KFredje