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