摘要:最近在看廖雪峰的教程,事件篇的練習題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學習。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。
最近在看廖雪峰的Jquery教程,事件篇的練習題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學習。題目如下:
首先要獲取到全選checkbox和每一項的checkbox,然后通過邏輯代碼實現(xiàn)題目要求。
先提供常規(guī)思路的版本,代碼注釋已經(jīng)詳細了:
selectAllLabel.click(() => { selectAllLabel.hide(); deselectAllLabel.show(); langs.prop("checked", true); }); deselectAllLabel.click(() => {//當用戶去掉“全不選”時,自動不選中所有語言; langs.prop("checked", false); deselectAllLabel.hide(); selectAllLabel.show(); }); langs.map(() => { $(this).change(() => { // 首先獲取已選中checkbox的個數(shù) var len = form.find("[name=lang]:checked").length; console.log("len=", len); // 當用戶把所有語言都手動勾上時,“全選”被自動勾上,并變?yōu)椤叭贿x”; if (len === langs.length) { selectAllLabel.hide(); deselectAllLabel.show(); selectAll.prop("checked", true); } else { // 當用戶手動去掉選中至少一種語言時,“全不選”自動被去掉選中,并變?yōu)椤叭x”。 selectAll.prop("checked", false); selectAllLabel.show(); deselectAllLabel.hide(); } }); }); invertSelect.click(() => { langs.each(() => { $(this).prop("checked", !$(this).prop("checked")); }); });
上面的代碼可以實現(xiàn)題目的要求,但是代碼量有點大,強迫癥不精簡會死的。先看看效果吧:
下面是放大招時間,如果你已經(jīng)搞懂上面的方法,請向下升級:
function updateLabel() { // 當已選中項和langs項數(shù)相等則allChecked為true,否則為false let allChecked = langs.filter(":checked").length === langs.length; // 根據(jù)選項是否全選中來設(shè)置“全選”選框的選中狀態(tài) selectAll.prop("checked", allChecked); if (allChecked) { selectAllLabel.hide(); deselectAllLabel.show(); } else { selectAllLabel.show(); deselectAllLabel.hide(); } } selectAll.change(e => { // 根據(jù)selectAll是否選中,設(shè)置每個langs的狀態(tài) langs.prop("checked", selectAll.is(":checked")); updateLabel(); }); invertSelect.click(e => { langs.click(); }); langs.change(() => updateLabel()); });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93877.html
摘要:最近在看廖雪峰的教程,事件篇的練習題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學習。題目如下首先要獲取到全選和每一項的,然后通過邏輯代碼實現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程,事件篇的練習題比較綜合,研究了很久終于研究出來了,現(xiàn)在分享出來,提供給小白學習。題目如下: showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要:當勾選全選按鈕旁邊的復(fù)選框時,列表中的選項全部選中,反之取消勾選則列表中的選項全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項的值選項總個數(shù)全選不全選HTML 我們的頁面上有一個歌曲列表,列出多行歌曲名稱,并匹配復(fù)選框供用戶選擇,并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時間都去哪兒了 ...
摘要:前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數(shù) 前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下: ...
摘要:前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數(shù) 前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下: ...
摘要:前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的。全部代碼如下全選反選全選反選大海天路再回首突然的自我甘心情愿光輝歲月雨蝶愛拼才會贏我只在乎你日不落選中的個數(shù) 前段時間做了一個全選和反選的功能,最近不忙了,做了一個簡化版的demo。 showImg(https://segmentfault.com/img/bV3v44?w=489&h=318); 全部代碼如下: ...
閱讀 1995·2021-11-23 10:08
閱讀 2325·2021-11-22 15:25
閱讀 3269·2021-11-11 16:55
閱讀 763·2021-11-04 16:05
閱讀 2576·2021-09-10 10:51
閱讀 704·2019-08-29 15:38
閱讀 1574·2019-08-29 14:11
閱讀 3480·2019-08-29 12:42