Home > Developer > JavaScript
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>67<body>8 9<input type= "button" value= "Select All" onclick= "Checkall ()" >Ten<input type= "button" value= "Cancel" onclick= "Cancelall ()" > One<input type= "button" value= "Reverse Selection" onclick= "Reverseall ()" > A<table border= "1" > -<thead> -<tr> the<td> selection </td> -<td>IP</td> -<td> Ports </td> -</tr> +</thead> -<tbody id= "TB" > +<tr> A<td><input type= "checkbox" ></td> at<td>192.168.1.1</td> -<td>8080</td> -</tr> -<tr> -<td><input type= "checkbox" ></td> -<td>192.168.1.1</td> in<td>8080</td> -</tr> to<tr> +<td><input type= "checkbox" ></td> -<td>192.168.1.1</td> the<td>8080</td> *</tr> $</tbody>Panax Notoginseng</table> -<!--introduction of jquery--> the<script src = ' jquery-1.12.4.js ' ></script> +<script> A //Select All the functionCheckall () { +$ (' #tb: CheckBox '). Prop (' checked ',true);//set the value of all the checkboxes below the ID is TB to True,porp is to list all the elements - } $ //Cancel $ functionCancelall () { -$ (' #tb: CheckBox '). Prop (' checked ',false);//set the value of all the checkboxes below the ID to be TB to false - } the //Inverse Selection - functionReverseall () {Wuyi$ (' #tb: CheckBox '). each (function () { the //This refers to each element of the current loop - //Inverse Selection Wu //Console.log (this); - //Console.log ($ (this)); About $ //Dom to implement - //if (this.checked) { - //this.checked = false; - //}else{ A //this.checked = true; + // } the - //jquery to achieve $ //prop: the //prop (' checked ') to see if it is selected the //prop (' checked ', false) sets the value to False the // the - in //if ($ (this). Prop (' checked ')) { the //$ (this). Prop (' checked ', false); the //}else { About //$ (this). Prop (' checked ', true); the // } the the //ternary operation to achieve + //v = condition? Truth value: false values - //var v = $ (this). Prop (' checked ')? false:true; the //$ (this). Prop (' checked ', v); Set ValueBayi //You can also write the following the$( This). Prop (' checked ')? $ ( This). Prop (' checked ',false):$( This). Prop (' checked ',true); the - - }) the } the</script> the the</body> -Knowledge Points:
The prop () method sets or returns the attributes and values of the selected element
When the method is used to return a property value, the value of the first matching element is returned.
When the method is used to set property values, one or more property/value pairs are set for the matching element collection
Each () method specifies the function to run for each matching element. Usage each (function () {})
Effects such as:
jquery full Select, cancel inverse selection, add JavaScript ternary operation (three kinds of method to achieve inverse selection)
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
