How to select all checkboxes using javascript(Already encapsulated into a method)

When deleting website records in batches, usually use javascript to select all the records to be deleted on the client, and then delete all the selected records on the server. Generally select the checkbox before the record instead of selecting it. For ease of understanding, an example will be used to explain in detail below.

How to select all checkboxes using javascript?

1. HTML code

If there is a product table, it is composed of two fields of "Product name" and "Price", in addition there is a checkbox for selected records in front; there is also a checkbox(name="selectAll") for all records selected below the table. The table is implemented by "dl dt dd + css", the specific code is as follows:

<dl id="product">
              <dt><span>Select</span><span>Product name</span><span>Price</span></dt>

       <dd><span><input name="1" type="checkbox" /></span></dd >
              < dd><span>Digital camera</span></dd >
              < dd><span>456</span></dd>

       <dd><span><input name="2" >type"checkbox" /></span></dd >
              < dd><span>Laptop</span></dd >
              < dd><span>580</span></dd>

       <dd><span><input name="3" type="checkbox" /></span></dd >
              < dd><span>Computer disc</span></dd >
              < dd><span>79</span></dd >
       </ dl>
       <div><input name="selectAll" type="checkbox" onclick="selectAllCheckBoxes('product',this.checked)" />Select All</div>

2. How to select all checkboxes using javascript

When you click the checkbox(name="selectAll") in front of "Select All", javascript selects all records in a circular manner. The specific ideas are as follows:

First, get the parent object(pID) of the table, then select all the HTML tags in the range that are of type input, and then iterate over all inputs with a full loop. If the type is checkbox, select it, and the code is as follows:

//ParentID is the ID of the table or its parent ID
       //bool is the current state of the checkbox(checked or unchecked)
       function selectAllCheckBoxes(ParentID, bool)
       {
              var pID = document.getElementById(ParentID);
              var cb = pID.getElementsByTagName("input");
              for(var i = 0;i < cb.length; i++){
                     if(cb[i].type == "checkbox")
                            cb[i].checked = bool;
              }
       }

Call: selectAllCheckBoxes('product',this.checked);//See last line of HTML code

This method has been verified to be error-free and compatible with mainstream browsers such as Internet Explorer, Edge, Chrome and Firefox. It can be called directly, which is very convenient.

Finally, let's make one point: the table implemented with "dl dt dd + css" in the example. It doesn't matter what table is used. As long as the "ID of the table or its parent ID" is passed to the "selectAllCheckBox" method, all can be selected.