jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
首先:引入jquery
<title>haran.info_jquery實(shí)例_全選全不選反選_select-all_unselect-all_reverse</title> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->
樣式:
<styletype="text/css"> <!-- #div1{ width:980px; margin:0 auto; position:relative; text-align:left; padding-left:400px; line-height:30px; border:1px dotted #0075c5; } li{ display:block; list-style:none; float:left; position:relative; padding-left:20px; } .clr{ height:20px; } --> </style>
body布局:
<divid="div1"> <divclass="clr"> </div> <!--選項(xiàng)開始--> <inputtype="checkbox"/><ahref="haran.info">haran.info_腳本編程</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_網(wǎng)站編程</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_系統(tǒng)管理</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_服務(wù)器配置</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_系統(tǒng)運(yùn)維</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_博客</a><br/> <inputtype="checkbox"/><ahref="haran.info">haran.info_首頁</a><br/> <!--選項(xiàng)結(jié)束--> <!--功能按鈕開始--> <inputtype="button"id="selAll"value="全選"/> <inputtype="button"id="unselAll"value="全不選"/> <inputtype="button"id="reverse"value="反選 "/> <!--功能按鈕結(jié)束--> <divclass="clr"> </div> </div><!--關(guān)閉div1-->
實(shí)現(xiàn)功能:
<scripttype="text/javascript"> $(document).ready(function () { $("#selAll").click(function () { //":checked"匹配所有的復(fù)選 $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之間必須有空格checked是設(shè)置選中狀態(tài)。如果為true則是選中fo否則false為不選中 }); $("#unselAll").click(function () { $("#div1 :checkbox").attr("checked", false); }); //理解用迭代原理each(function(){}) $("#reverse").click(function () { $("#div1 :checkbox").each(function () { $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判斷復(fù)選框的狀態(tài):如果選中則取反 }); }); }); </script>
以上這篇jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對checkbox 復(fù)選框的全選全不選反選的操作
- jquery 實(shí)現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
- jQuery實(shí)現(xiàn)全選、反選和不選功能
- 利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
- JQuery選中checkbox方法代碼實(shí)例(全選、反選、全不選)
- jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
- 基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
- 基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
- jQuery實(shí)現(xiàn)全選、反選和不選功能的方法詳解
相關(guān)文章
jquery實(shí)現(xiàn)簡單實(shí)用的輪播器
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單實(shí)用的輪播器制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡寫
一個(gè)簡單技巧的集合,幫你提升 jQuery 技能,下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧,對jquery小技巧感興趣的朋友一起學(xué)習(xí)吧2015-11-11JQUERY實(shí)現(xiàn)左側(cè)TIPS滑進(jìn)滑出效果示例
左側(cè)提示滑進(jìn)滑出的平滑效果使用jQuery實(shí)現(xiàn),具體代碼及截圖如下,感興趣的朋友可以參考下哈,希望對大家學(xué)習(xí)jquery有所幫助2013-06-06JQuery+div+css 無限級聯(lián)樹實(shí)現(xiàn)代碼
JQuery+div+css 無限級聯(lián)樹實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-03-03jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí),會彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10實(shí)例解析jQuery中如何取消后續(xù)執(zhí)行內(nèi)容
本文主要介紹了jQuery中取消后續(xù)執(zhí)行內(nèi)容的實(shí)例,代碼通俗易懂。需要的朋友來看下吧2016-12-12