快捷導(dǎo)航

jQuery實(shí)現(xiàn)復(fù)選框的全選和反選

更新時(shí)間：2017年02月02日 13:40:43 作者：小小趙老漢

本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

話不多說，請看代碼

<!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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JQuery 實(shí)現(xiàn)在同一頁面錨點(diǎn)鏈接之間的平滑滾動(dòng)
JQuery 原來比我想象的要強(qiáng)大的多，本文用 JQuery 實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)，在同一頁面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng)
2014-10-10
BootStrap樹狀圖顯示功能
本文是小編根據(jù)bootstrap的折疊設(shè)計(jì)的樹狀圖顯示效果，只有二級顯示，可以用在簡單的目錄等。對實(shí)現(xiàn)代碼感興趣的朋友可以參考下本文
2016-11-11
使用BootStrap和Metroui設(shè)計(jì)的metro風(fēng)格微網(wǎng)站或手機(jī)app界面
今天使用bootstrap和metroui設(shè)計(jì)了一個(gè)metro風(fēng)格的移動(dòng)app或者微信微網(wǎng)站的界面，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友可以參考下
2016-10-10
jQuery 學(xué)習(xí)入門篇附實(shí)例代碼
這篇文章比較不錯(cuò)，更重要的是一些實(shí)例代碼，對于想學(xué)習(xí)jquery的朋友是個(gè)不錯(cuò)的資料。
2010-03-03
jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個(gè)人覺得是一種不錯(cuò)的用戶體驗(yàn)，抽空研究了一下，原理還蠻簡單的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
jquery點(diǎn)擊獲取動(dòng)態(tài)數(shù)據(jù)進(jìn)行傳參問題
這篇文章主要介紹了jquery點(diǎn)擊獲取動(dòng)態(tài)數(shù)據(jù)進(jìn)行傳參問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
jQuery Ajax 實(shí)例全解析
jQuery確實(shí)是一個(gè)挺好的輕量級的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣。
2011-04-04
jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼，有需要的小伙伴可以參考下
2015-04-04
使用jquery操作session方法分享
本文給大家分享了一個(gè)jQuery操作session的插件jQuerysession，并做了簡單介紹，及基本語法，非常不錯(cuò)的一個(gè)插件，推薦給小伙伴們。
2015-01-01
jQuery chili圖片遠(yuǎn)處放大插件
為了讓本地圖片、遠(yuǎn)程圖片、過小的圖片都適應(yīng)此插件，有很多細(xì)節(jié)問題要處理。
2009-11-11