Home > Developer > JavaScript
<! DOCTYPE html>{padding:0; Margin:0; }. Wrap {width:300px; margin:100px Auto0; } Table {Border-Collapse:collapse; Border-spacing:0; border:1px solid #c0c0c0; width:300px; } th, td {Border:1px solid #d0d0d0; Color: #404060; padding:10px; } th {background-color: #09c; Font:bold 16px"Microsoft Jas Black"; Color: #fff; } TD {Font:14px"Microsoft Jas Black"; } tbody TR {background-color: #f0f0f0; } tbody tr:hover {cursor:pointer; Background-color: #fafafa; } </style>//the entire selection, reverse election case, can be divided into three requirements//1. All-In-A-click Logic//1.1 getting elements varJ_cball = document.getElementById (' J_cball ')); varTB = document.getElementById (' J_TB '); varCBS = Tb.getelementsbytagname (' input ');//Console.log (CBS);//1.2 Register A click event with the Select all check boxJ_cball.onclick =function(){ //1.3 In the event handler, let the following be checked, get none selected for(vari = 0; i < cbs.length; i++) {cbs[i].checked=j_cball.checked; } } //2. The following individual check box is clicked when the logic //2.1 Register A click event for each single check box for(vari = 0; i < cbs.length; i++) {Cbs[i].onclick= Cbclick; } //the function to be triggered when a single check box is clicked functionCbclick () { //2.2.1 Determines whether all individual checkboxes are selected varFlag =true; for(vari = 0; i < cbs.length; i++) { if(!cbs[i].checked) {////prove that there is an uncheckedFlag =false; Break;//If you have found an unchecked, there is no need to look down } } //2.2.2 Assign values to all boxes based on the results of previous judgmentsj_cball.checked=Flag; } //3. Logic to reverse the selection of clicks//3.1 Registering an event with the inverse selection buttondocument.getElementById (' btn '). onclick =function(){ //3.2 event handler, make a single check box reverse for(vari = 0; i < cbs.length; i++) {cbs[i].checked= !cbs[i].checked; }//3.3 After the inverse, determine whether each individual check box is selectedCbclick (); }</script></body>
<! DOCTYPE html><body><div class= "wrap" > <table> <thead> <tr> <th> <input type= "checkbox" id= "J_cball"/> </ th> <th> commodities </th> <th> price </th> </TR > </thead> <tbody id= "J_TB" > <tr> <TD > <input type= "checkbox"/> </td> <TD >iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type= "checkbox"/> </td> <td>ipad pro</td> <td>5000</td> </TR > <tr> ≪td> <input type= "checkbox"/> </td> &L T;td>ipad air</td> <td>2000</td> </tr> <TR > <td> <input type= "checkbox"/> </TD > <td>apple watch</td> <td>2000</td> </tr> </tbody> </table> <input type= "button" value= " Reverse "id=" BTN "></div>
<script> //Entire selection, reverse election case, can be divided into three requirements// 1. Logic //Description: Select all when selected, all selected below, otherwise, do not select// 1.1 get element var j_cball = document.getelement Byid (' J_cball '); var TB = document.getElementById (' j_tb '); var CBS = Tb.getelementsbytagname (' Input ');// console.log (CBS);// 1.2 to the Select all check box register Click events J_cball.onclick = function () { & nbsp // 1.3 in the event handler, let the following be checked, get none selected// How to tell if the Select All is selected?// console.log (j_cball.checked); // if (j_cball.checked) {// // Explanation Select All selected, then the following are checked////// cbs[0].checked = true;//// cbs[1].checked = t rue;//// cbs[2].checked = true;//// cbs[3].checked = true;// for (var i = 0; i < cbs.length; i++) {// &NBSP;Cbs[i].checked = true;// }//// }else{// //Description Select All , then none of the following are selected// for (var i = 0; i < cbs.length; i++) {// cbs[i ].checked = false;// }// } / /optimized: for (var i = 0; i < cbs.length; i++) { cbs[i].checked = j_cball.checked; } } // 2. The following individual check boxes are clicked when the logic //We should click on each individual checkbox to determine whether the other individual check boxes are selected //2.1 to each individual check box to register click events for (var i = 0; i < cbs.length; i++) { Cbs[i].onclick = Cbclick;//To save memory, put the function declaration out of the for loop }&NBS P //When a single check box is clicked, the function to be triggered function Cbclick () { // 2.2 in the event handler, determineIf each is checked, if all are selected, select All, otherwise, select None //2.2.1 to determine whether all individual checkboxes are selected var flag = true; Used to determine if all are checked, assuming that the status is selected for (var i = 0; i < cbs.length; i++) {// &NBSP;IF (cbs[i].c Hecked = = False) {// //proof of unchecked// flag = false;//  ; } if (!cbs[i].checked) {// &N Bsp //proof of unchecked flag = false; break; If you have found an unchecked, there is no need to look down } } &NB Sp //2.2.2 assign values to all checkboxes based on the results of previous judgments/ &NBSP;IF (flag = = True) {// j_cball.checked = Tru e;// }else{// j_cball.checked = false;// } & nbsp J_cball.checked = flag; } // 3. Reverse the logic of the click //Click the Reverse Selection button, so that the individual check box to reverse, after the judgment is not all selected, if all selected, the Select button is also selected, otherwise, the Select button is not selected// 3.1 to the Reverse button registration event document.getElementById (' btn '). onclick = function () { // 3.2 event handler, let a single check box take the reverse for (var i = 0; i < cbs.length; i++) { cbs[i].checked =!cbs[i].checked; &N Bsp }// 3.3, determine whether each individual check box is selected Cbclick (); }
</script></body>
JavaScript Tutorial Series 41: All-in-a-choice, classic case study
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
