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实例
原文地址：http://www.cnblogs.com/gengcx/p/7639109.html