JavaScript implements select all and unselect all operations

JavaScript implements select all and unselect all operations

This article shares the specific code for JavaScript to implement the select all and unselect all operations for your reference. The specific content is as follows

Effect examples

By default:

When Select All is checked:

When you uncheck item A/item B/item C at will

Implementation Code

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>Select All</title>
  <script>
   function myAll() {
    var all = document.getElementById("all");
    var oneList = document.getElementsByName("one");
    for(var i = 0; i < oneList.length; i++) {
     oneList[i].checked = all.checked;
    }
   }

   function myOne() {
    var all = document.getElementById("all");
    var oneList = document.getElementsByName("one");
    for(var i = 0; i < oneList.length; i++) {
     if(oneList[i].checked == false) {
      all.checked = false;
      return;
     }
    }
    all.checked = true;
   }
  </script>
 </head>

 <body>
  <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
   <tr>
    <th>Select All<input id="all" type="checkbox" onclick="myAll()" /></th>
    <th>Serial number</th>
    <th>Name</th>
    <th>Unit Price</th>
    <th>Quantity</th>
    <th>Total</th>
   </tr>
   <tr>
    <td><input name="one" type="checkbox" onclick="myOne()" /></td>
    <td>1</td>
    <td>Item A</td>
    <td>￥55</td>
    <td>1</td>
    <td>￥55</td>
   </tr>
   <tr>
    <td><input name="one" type="checkbox" onclick="myOne()" /></td>
    <td>2</td>
    <td>Item B</td>
    <td>￥70</td>
    <td>1</td>
    <td>￥70</td>
   </tr>
   <tr>
    <td><input name="one" type="checkbox" onclick="myOne()" /></td>
    <td>3</td>
    <td>Item C</td>
    <td>￥66</td>
    <td>1</td>
    <td>￥66</td>
   </tr>
  </table>
 </body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js to achieve all selection and none selection
  • js realizes the function of selecting all and deselecting all
  • Js implements the checkbox select all, unselect all and reverse selection function code example
  • JS implementation of "select all" and "unselect all" function code examples
  • Native JS version and jQuery version to achieve checkbox selection/unselect/select/select in line (Mr.Think)
  • JS implements the function of selecting all, unselecting or unselecting all checkboxes
  • How to select all/unselect all checkboxes using js and jQuery
  • JS implements the function of selecting all and deselecting all in CheckBox
  • How to use js to select all or unselect all
  • Another way to implement jquery select all/unselect all/invert (with native js)

<<:  Detailed explanation of the process of deploying MySql on Centos server and connecting to Navicat

>>:  Quickly learn MySQL basics

Recommend

MySQL semi-synchronous replication principle configuration and introduction detailed explanation

Environment Introduction: Ubuntu Server 16.04.2+M...

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

1. Virtual Machine Preparation 1. Create a new vi...

Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up wind...

Using cursor loop to read temporary table in Mysql stored procedure

cursor A cursor is a method used to view or proce...

react-diagram serialization Json interpretation case analysis

The goal of this document is to explain the Json ...

CSS and JS to achieve romantic meteor shower animation

1. Rendering 2. Source code HTML < body > &...

Detailed explanation of MySQL master-slave replication practice - replication based on log points

Logpoint-based replication 1. Create a dedicated ...

VMware Workstation installation Linux (Ubuntu) system

For those who don't know how to install the s...

10 minutes to thoroughly understand WeChat applet single page application routing

Single page application characteristics "Ass...

Detailed process of using vmware to test PXE batch installation server

Table of contents 1. Preparation 1. Prepare the e...

Detailed usage of Vue timer

This article example shares the specific code of ...

The difference between MySQL count(1), count(*), and count(field)

Table of contents 1. First look at COUNT 2. The d...

How to use nginx to intercept specified URL requests through regular expressions

nginx server nginx is an excellent web server tha...

Detailed explanation of the loading rules of the require method in node.js

Loading rules of require method Prioritize loadin...

Summary of several APIs or tips in HTML5 that cannot be missed

In previous blog posts, I have been focusing on so...