JavaScript implementation Select All

There are 6 checkboxes in the JSP page, the first check box is all selected and not selected, the remaining 5 is the normal check box, when you click the Select all check box, the normal check box will be all selected, if you click the Select all check box again, then the normal check box will be unchecked, and if the Select all check box is selected, If you remove the normal check box, the Select all check box is also set to unchecked. Conversely, if the current Select all check box is not selected, the Select All button is selected if the normal check box is selected.

Look below the JSP check box code

<table>  <tr>  <td><input type= "checkbox" Name= "Checkall" onclick= "SelectAll ()" > </td>  <td> Select all </td>  </tr>  <tr>  <td><input type= "checkbox" Name= "Check" onclick= "Checkitem (This)" ></td>  <td>1</td>  </tr>  <tr>  <td><input type= "checkbox" name= "Check" onclick= "Checkitem (This)" ></td>  <td>2 </td>  </tr>  <tr>  <td><input type= "checkbox" name= "Check" onclick= " Checkitem (This) "></td>  <td>3</td>  </tr>  <tr>  <td> <input type= "checkbox" name= "Check" onclick= "Checkitem (This)" ></td>  <td>4</td>  </tr>  <tr>  <td><input type= "checkbox" name= "Check" onclick= "Checkitem (This)" > </td>  <td>5</td>  </tr>  </table>

And then we look at their JavaScript code.

<script type= "Text/javascript" >function SelectAll () {//Get Select all check box var root = document.getElementById ("Checkall"); /Gets the state of the Select all check box var status = root.checked;//Gets the other check box set var elem = Document.getelementsbyname ("check");//If the Select all check box state is True then select all other buttons, Otherwise select the other button if (status) {for (var i = 0;i<elem.length;i++) {elem[i].checked =  true;}} Else{for (var i = 0;i<elem.length;i++) {elem[i].checked =  false;}}} function Checkitem (ele) {var root = document.getElementById ("Checkall"), if (!ele.checked) {//When a non-select check box is removed in a select all state Select all check box Checked property to set to Falseroot.checked = false;} else{//The Select all check box Checked property is set to Truevar Elem = Document.getelementsbyname (ele.name) when the rest of the remaining non-select check boxes are fully selected, for (var i = 0;i<) elem.length;i++) {if (!elem[i].checked) {return;}} root.checked = True;}} </script>

This allows you to implement the above functions.

JavaScript implementation Select All