如何使用jQuery實現核取方塊的全選和取消
在實際應用中,尤其是網站的後臺管理中,經常有這樣的功能,對提高網站的可操作性有著很大的巨大的益處,下面就通過一個例項簡單介紹一下如何利用jQuery實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> li { list-style-type: none; font-size: 12px; color: blue; width: 300px; height: 20px; line-height: 20px; } a { width: 200px; height: 20px; float: left; } .ck { float: left; width: 26px; } .time { color: red; width: 60px; height: 20px; float: right; } .do { font-size: 12px; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#myck").bind("click", function () { $('input[type=checkbox]').prop('checked', $(this).prop('checked')); if ($(".do").text() == "全選") { $(".do").text("取消"); } else { $(".do").text("全選"); } }) }) </script> </head> <body> <div> <ul> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">螞蟻部落歡迎您</a> <span class="time">2012-12-13</span> </li> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">大家好,好久不見了</a> <span class="time">2012-12-13</span> </li> <li> <span class="ck"><input type="checkbox" /></span> <a href="#">螞蟻部落</a> <span class="time">2012-12-13</span> </li> </ul> <div><input type="checkbox" id="myck" /><span class="do">全選</span></div> </div> </body> </html>
相關文章
- jQuery如何實現核取方塊全選和全不選jQuery
- 使用jQuery做核取方塊的全選與取消jQuery
- js核取方塊全選和取消全選效果JS
- JavaScript 核取方塊全選和取消全選效果JavaScript
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- 小程式核取方塊全選和全部取消
- jquery實現checkbox核取方塊全選效果jQuery
- jQuery核取方塊全選和全不選效果jQuery
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- jquery table下的核取方塊選中、取消jQuery
- jQuery核取方塊checkbox的全選和反選jQuery
- checkbox核取方塊全選和取消全選例項程式碼
- jQuery核取方塊全選和全不選效果程式碼jQuery
- JS實現核取方塊全選反選JS
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- 選中和取消選中核取方塊實現背景變色和取消變色
- js如何實現點選li選中和取消裡面的核取方塊JS
- 原生js實現的核取方塊的全選和全不選效果JS
- JavaScript 核取方塊全選和全不選JavaScript
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- javascript核取方塊全選和反選效果JavaScript
- JavaScript核取方塊全選和全不選詳解JavaScript
- 核取方塊全選和全不選程式碼例項
- jQuery實現的限制checkbox核取方塊選中的數目jQuery
- jquery實現的判斷checkbox核取方塊是否被選中jQuery
- 使用jquery獲取被選中checkbox核取方塊的值jQuery
- checkbox 核取方塊全選程式碼
- 實現購物車 全選全不選,反選,單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決
- 如何實現點選文字也能夠選中核取方塊
- jquery獲取選中checkbox核取方塊的值jQuery
- jQuery獲取選中的checkbox核取方塊的值jQuery
- jQuery第二次無法全選checkbox核取方塊jQuery
- jquery獲取沒有選中的checkbox核取方塊jQuery
- jQuery實現的將選中的checkbox核取方塊的值存入陣列jQuery陣列
- 單選按鈕和核取方塊
- js實現checkbox核取方塊的反選效果JS
- jQuery Validate限定核取方塊選中的數目jQuery
- jquerycheckbox核取方塊多次點選判斷選中狀態,以及全選/取消的程式碼示例jQuery