标签：三元运算 eve ons color div value one each class
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；如果为假，则为真；
标签：三元运算 eve ons color div value one each class
原文地址：http://www.cnblogs.com/gengcx/p/7639109.html
