day17--JQuery實例
阿新 • • 發佈：2017-10-09
scrip 端口 isa 參數 一個 prop -s oct jquery
1、表格選擇框--全選，反選，取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkAll();"/> <input type="button" value="反選" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>選項</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop(‘checked‘, true); } function cancleAll(){ $(‘#i1 :checkbox‘).prop(‘checked‘,false); } function reverseAll(){ $(‘#i1 :checkbox‘).each(function(){ //this，代指當前循環的每一個元素 //k是循環的下標 //console.log($(this)); if(this.checked){this.checked=false} else{ this.checked=true }; }) } </script> </body> </html>
上面HTML代碼中，this代指每次的循環，this.checked判斷標簽是否被選中，選中則為true；未選中則為false。$().prop()設置隱藏，顯示，選中或未選中。prop("checked",true) prop("checked",false) prop("disable",none)設置隱藏。
下面通過JQuery來實現，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkAll();"/> <input type="button" value="反選" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>選項</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop(‘checked‘, true); } function cancleAll(){ $(‘#i1 :checkbox‘).prop(‘checked‘,false); } function reverseAll(){ $(‘#i1 :checkbox‘).each(function(){ //this，代指當前循環的每一個元素 //k是循環的下標 //console.log($(this)); //if(this.checked){this.checked=false} else{ //this.checked=true //}; if($(this).prop(‘checked‘)){ $(this).prop(‘checked‘,false); } else{ $(this).prop(‘checked‘,true); }; }) } </script> </body> </html>
$().prop("checked")，一個參數代表獲取值，判斷是選定，checked的話，返回true；否則返回false；$().prop("checked",true)代表設置值。
三元運算，即判斷，var v = 條件(true)?false:true 如果條件為真(true)，則v=false；否則條件為假(false)，則v=true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全選" onclick="checkAll();"/> <input type="button" value="反選" onclick="reverseAll();"/> <input type="button" value="取消" onclick="cancleAll();"/> <table border="2"> <thead> <tr><th>選項</th><th>IP</th><th>端口</th></tr> </thead> <tbody id="i1"> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll(){ $("#i1 :checkbox").prop(‘checked‘, true); } function cancleAll(){ $(‘#i1 :checkbox‘).prop(‘checked‘,false); } function reverseAll(){ $(‘#i1 :checkbox‘).each(function(){ //this，代指當前循環的每一個元素 //k是循環的下標 //console.log($(this)); //if(this.checked){this.checked=false} else{ //this.checked=true //}; // if($(this).prop(‘checked‘)){ // $(this).prop(‘checked‘,false); // } else{ // $(this).prop(‘checked‘,true); // }; //三元運算 //var v = 條件為真，真值，假值,如果為真，則設置為false；如果為假，則設置為真 var v = $(this).prop(‘checked‘)?false:true; $(this).prop(‘checked‘,v); }) } </script> </body> </html>
上面三元運算中，$().條件?false:true；false一定要寫在前面，如果為真，則為false；如果為假，則為真；
day17--JQuery實例