jQuery全选反选实例
生活随笔
收集整理的這篇文章主要介紹了
jQuery全选反选实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. $('#tb:checkbox').each(function(){ 每次都會執行
全選-取消操作，注意$('#tb :checkbox').prop('checked',true); tb后面一定得有括號，否則會報錯。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="全選" οnclick="checkAll();"/><input type="button" value="反選" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="cancelAll();"/><table border="1"><thead><tr><th>選項</th><th>IP</th><th>port</th></tr></thead><tbody id="tb"><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(){$('#tb :checkbox').prop('checked',true);}function cancelAll(){$('#tb :checkbox').prop('checked',false);}</script></body> </html>?用DOM實現 全選-反選-取消操作：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="全選" οnclick="checkAll();"/><input type="button" value="反選" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="cancelAll();"/><table border="1"><thead><tr><th>選項</th><th>IP</th><th>port</th></tr></thead><tbody id="tb"><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(){$('#tb :checkbox').prop('checked',true);}function cancelAll(){$('#tb :checkbox').prop('checked',false);}function reverseAll(){$('#tb :checkbox').each(function(){//this 代指當前循環的每一個元素,this是DOM對象。//console.log(this);//用DOM實現的if(this.checked){this.checked=false;}else{this.checked=true;}})}</script></body> </html>
?效果：
2.用 jQuery實現 全選-反選-取消操作：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="全選" οnclick="checkAll();"/><input type="button" value="反選" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="cancelAll();"/><table border="1"><thead><tr><th>選項</th><th>IP</th><th>port</th></tr></thead><tbody id="tb"><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(){$('#tb :checkbox').prop('checked',true);}function cancelAll(){$('#tb :checkbox').prop('checked',false);}function reverseAll(){$('#tb :checkbox').each(function(){//傳2個參數表示設置值，傳1個參數表示獲取值。if($(this).prop('checked')){$(this).prop('checked',false);}else{$(this).prop('checked',true);}})}</script></body> </html>?3. 三元運算
var v=條件？真值：假值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="button" value="全選" οnclick="checkAll();"/><input type="button" value="反選" οnclick="reverseAll();"/><input type="button" value="取消" οnclick="cancelAll();"/><table border="1"><thead><tr><th>選項</th><th>IP</th><th>port</th></tr></thead><tbody id="tb"><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(){$('#tb :checkbox').prop('checked',true);}function cancelAll(){$('#tb :checkbox').prop('checked',false);}function reverseAll(){$('#tb :checkbox').each(function(){var v=$(this).prop('checked')?false:true;$(this).prop('checked',v);})}</script></body> </html>?4. 筆記
實例：全選，反選，取消-選擇器-$('#tb :checkbox').prop('checked'); 獲取值$('#tb :checkbox').prop('checked',true); 賦值-jQuery方法內置循環： $('#tb :checkbox').xxxx$('#tb :checkbox').each(function(k){//k是當前索引//this，DOM，當前循環的元素$(this)})-三元運算：var v=條件？真值：假值?
轉載于:https://www.cnblogs.com/momo8238/p/7463587.html
總結
以上是生活随笔為你收集整理的jQuery全选反选实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 56、对称的二叉树
- 下一篇： Solr 6.7学习笔记（04）-- S