jQuery實現(xiàn)復(fù)選框的全選和反選
更新時間:2017年02月02日 13:40:43 作者:小小趙老漢
本文主要分享了使用jQuery實現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
話不多說,請看代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <label for="apple">蘋果</label> <input type="checkbox" name="apple"> <label for="banana">香蕉</label> <input type="checkbox" name="banana"> <label for="orange">橘子</label> <input type="checkbox" name="orange"> <input type="button" value="全選" onclick="allPick()"> <input type="button" value="全不選" onclick="unAllPick()"> <input type="button" value="反轉(zhuǎn)" onclick="inverserPick()"> </form> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> // 全選 function allPick() { $("[type=checkbox]:checkbox").each(function () { this.checked = true; }) } // 全不選 function unAllPick() { $("[type=checkbox]:checkbox").each(function () { this.checked = false; }) } // 反轉(zhuǎn) function inverserPick() { $("[type=checkbox]:checkbox").each(function () { this.checked = !this.checked; }) } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- 基于JavaScript實現(xiàn)全選、不選和反選效果
- JQuery實現(xiàn)列表中復(fù)選框全選反選功能封裝(推薦)
- jquery實現(xiàn)全選、不選、反選的兩種方法
- js實現(xiàn)checkbox全選和反選示例
- asp.net GridView控件中模板列CheckBox全選、反選、取消
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實現(xiàn)代碼
- jquery復(fù)選框CHECKBOX全選、反選
- jquery實現(xiàn)全選、反選、獲得所有選中的checkbox
- Android checkbox的listView(多選,全選,反選)具體實現(xiàn)方法
- js, jQuery實現(xiàn)全選、反選功能
相關(guān)文章
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jquery.gridrotator實現(xiàn)響應(yīng)式圖片展示畫廊效果
本教程將教大家制作一個jQuery響應(yīng)式圖片展示畫廊效果,所有圖片以網(wǎng)格的形式排列,然后定時隨機翻轉(zhuǎn)其中某些格子用來切換圖片。這種效果可以用來當做背景或裝飾放在我們的網(wǎng)站上。2015-06-06