jQuery怎樣實現全選功能和全不選功能呢
工具/材料
電腦
sublime
jQuery插件
操作方法
-
01
如圖，先設置好一些簡單的可勾選的選項，這里我就設置了4個選項。
-
02
然后設置兩個按鈕，一個按鈕是全選，一個按鈕是全不選，并且分別添加類名，這里我就給它們添加b1,b2的類名。
-
03
保存HTML網頁，然后就可以看到有4個選項框，我們需要做的就是當點擊”全選”按鈕時，選項框會自動被全部勾選上。而點擊“全不選”按鈕時，則全部都取消勾選。
-
04
接著引入jQuery插件，以及寫上jQuery入口函數，不懂的話，參考我的其他指南。
-
05
之后，給b1全選按鈕添加一個點擊事件click。
-
06
然后設置所有input的checked都為true。在這里用到了prop，prop可以設置元素的固有屬性哦。
-
07
這樣，當我們點擊全選按鈕的時候，所有的選項都會被勾選上了哦。
-
08
同理，我們給b2全不選按鈕也添加一個click事件。
-
09
這時候，我們就要設置所有的input的checked屬性為false，表示不選中。
-
10
這樣，當我們點擊“全不選”按鈕，所有被勾選上的選項都會取消勾選哦。
-
11
為了方便大家，貼出全選按鈕的源代碼，記得jQuery的路徑要修改對哦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js">
</script>
<script>
(function(){
(".b1").click(function(){
("input").prop("checked",true);
});
(".b2").click(function(){
("input").prop("checked",false);
});
});
</script>
</head>
<body>
舞蹈<input type="checkbox"><br>
排球<input type="checkbox"><br>
瑜伽<input type="checkbox"><br>
網球<input type="checkbox"><br>
<button class="b1">全選</button>
<button class="b2">全不選</button>
</body>
</html> - End
特別提示
我用的是jQuery實現全選的，而js太復雜了，后續我再寫一個關于js的。
- 發表于 2017-08-29 00:00
- 閱讀 ( 757 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章