jQuery實(shí)現(xiàn)checkbox全選功能完整實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)checkbox全選功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>www.dbjr.com.cn jQuery實(shí)現(xiàn)checkBox全選</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> /* *統(tǒng)一設(shè)置所有條目的 */ function setItemCheckBox(flag) { $(":checkbox[name=checkboxBtn]").prop("checked",flag); } $(function () { //點(diǎn)擊全選 $("#selectAll").click(function(){ //1.獲取全選的狀態(tài) var flag = this.checked;//獲取全選的狀態(tài) if(flag){ $(this).prop("checked", true); }else{ $(this).prop("checked", false); } //var flag = $(":checkbox[name=selectAll]").attr("checked");//jquery-1.5.1的用法 //2.讓所有條目的復(fù)選框與全選的狀態(tài)同步 //alert(flag); setItemCheckBox(flag); }); //給所有復(fù)選框添加事件 $(":checkbox[name=checkboxBtn]").click(function(){ var flagV = this.checked; if(flagV){ $(this).prop("checked", true); }else{ $(this).prop("checked", false); } //獲取所有復(fù)選框的個(gè)數(shù) var len = $(":checkbox[name=checkboxBtn]").length; //獲取所有被選中的復(fù)選框的個(gè)數(shù) var checked_len = $(":checkbox[name=checkboxBtn]:checked").length; if(len == checked_len){ //alert("全選中了"); $("#selectAll").prop("checked",true); } else if(checked_len == 0) { $("#selectAll").prop("checked",false); } else { $("#selectAll").prop("checked",false); } }); }); </script> <body> <div id="songList"> <input type="checkbox" value="歌曲1" name="checkboxBtn"/>歌曲1<br /> <input type="checkbox" value="歌曲2" name="checkboxBtn"/>歌曲2<br /> <input type="checkbox" value="歌曲3" name="checkboxBtn"/>歌曲3<br /> </div> <input type="checkbox" id="selectAll" name="selectAllBtn"/>全選<br /> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun運(yùn)行測(cè)試效果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery表格(table)操作技巧匯總》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)全選、反選、獲得所有選中的checkbox
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- jquery復(fù)選框CHECKBOX全選、反選
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
- checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
- jquery中checkbox全選失效的解決方法
- jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
- 多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
相關(guān)文章
自己動(dòng)手手寫(xiě)jQuery插件總結(jié)
這篇文章主要介紹了自己動(dòng)手手寫(xiě)jQuery插件總結(jié),本文是個(gè)人學(xué)習(xí)jQuery插件的總結(jié),實(shí)現(xiàn)了一個(gè)小功能的jQuery插件,需要的朋友可以參考下2015-01-01jquery html動(dòng)態(tài)添加的元素綁定事件詳解
下面小編就為大家?guī)?lái)一篇jquery html動(dòng)態(tài)添加的元素綁定事件詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05JQuery中serialize()、serializeArray()和param()方法示例介紹
serialize()方法也是作用于一個(gè)JQuery對(duì)象,它能夠?qū)OM元素內(nèi)容序列化為字符串,serializeArray()方法不是返回字符串,而是將DOM元素序列化后,返回JSON格式的數(shù)據(jù)2014-07-07Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無(wú)縫滾動(dòng)實(shí)現(xiàn)代碼
Jquery與JS兩種方法仿twitter/新浪微博 高度自適應(yīng)無(wú)縫滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11與jquery serializeArray()一起使用的函數(shù),主要來(lái)方便提交表單
與jquery serializeArray()一起使用的函數(shù),主要來(lái)方便提交表單,需要的朋友可以參考下。2011-01-01自定義一個(gè)jquery插件[鼠標(biāo)懸浮時(shí)候 出現(xiàn)說(shuō)明label]
自定義一個(gè)jquery插件,一個(gè)簡(jiǎn)單的jquery.js,入門(mén)的jquery插件,jquery入門(mén)實(shí)例,jquery helloworld。2011-06-06用jQuery向div中添加Html文本內(nèi)容的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇用jQuery向div中添加Html文本內(nèi)容的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07