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>