简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

jQuery實作複選框的全選和反選

高洛峰
發布： 2017-02-06 12:58:14
原創
1329 人瀏覽過

話不多說，請看程式碼

<!DOCTYPE html>
<html>
<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="反转" 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;
  })
 }
 // 反转
 function inverserPick() {
  $("[type=checkbox]:checkbox").each(function () {
  this.checked = !this.checked;
  })
 }
 </script>
</body>
</html>
登入後複製

以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！

更多jQuery實現複選框的全選和反選相關文章請關注PHP中文網！

相關標籤：
jQuery 复选框 全选 反选
來源：php.cn
上一篇：javascript實作複選框全選或反選 下一篇：JQuery實作清單中複選框全選反選功能封裝
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何在Reactjs中選擇多個複選框 我有一個選項列表，我想在其中選擇多個複選框，但無法做到這一點，這段程式碼有什麼問題？沙箱網址
來自於 2024-04-06 18:55:21
0
1
396
MERN stack搜尋方塊和複選框的正規表示式篩選器 我正在嘗試透過邊做邊學來了解MERN堆疊如何協同工作，並且我正在遵循bezcoder的這些教程：Node.js/Express/MongoDb（Github整個程式碼）和React...
來自於 2024-04-06 14:53:12
0
1
425
提交後如何列印選定的複選框值 這是我的複選框清單和我需要提交資料的按鈕..<label>AccessLocations</label><br/><inputtype=&...
來自於 2024-04-06 13:07:43
0
2
337
Symfony 5 中的自訂預設條款和條件複選框 我是symfony的新手，我正在嘗試建立我的註冊頁面。透過我的FormType產生表單和字段，但我有點想更改條款和條件複選框的外觀。預設情況下，它是標籤然後是盒子，我想顛倒它們並將...
來自於 2024-04-04 22:42:19
0
1
1365
需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！