一.準備
這個案例用的是JQuery技術.所以需要先匯入JQuery檔案.
在準備一個下圖的按鈕樣式
二.分析
1.功能分析
1).點擊全選按鈕,下面的按鈕都會變成選中狀態,再次點擊全選按鈕,下面三個變成未選中狀態
2).點擊下面的按鈕會變成選中狀態,當三個按鈕全部選中時,全選按鈕會變成選中狀態
3).當全選被選中時,取消任意一個按鈕全選都會取消選中.
2.系結事件
對于復選框的點擊可以系結點擊事件也可以系結change事件.change事件就是當狀態發生改變時觸發的事件.
3.功能實作
(1).點擊全選按鈕,下面的按鈕都會變成選中狀態,再次點擊全選按鈕,下面三個變成未選中狀態簡而言之就是下面的按鈕會隨著全選按鈕的變化而變化.代碼如下:
(2).第二個功能和第三個功能可以和在一起,下面復選框的狀態每發生一次改變都會遍歷一遍所有被選中的復選框,如果數量等于3則全選按鈕會被選上.代碼如下:
這樣全選反選的功能就基本實作了.
三.回顧
1.這個案例核心技術是jquery,當然現在主流的vue和react技術也能實作,js原生也能實作,在學習案例的時候可以去試著用各種不同的方法去實作一個案例.
2.改案例系結的事件是change事件,change事件和click事件都可以使用.
3.因為是復選框,所以用到了jquery中的prop(),方法,這個方法有倆個引數,prop('checked',true),第一個引數表示元素的屬性,第二個引數是元素的屬性值,在jquery中還有一個方法和他很相似,就是attr(),
4.我們在獲取被選中的復選框時用到的是$('ckbox:checked'),這種寫法可以直接拿到所有被選中的復選框,回傳的是一個陣列.如果運用不熟練也可以使用each方法.
如果對你有幫助,可以點贊關注一下.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/306846.html
標籤：其他
上一篇：Athena中的SQL錯誤代碼你的查詢有以下錯誤。SYNTAX_ERROR:line5:8:列'金額'不能被解決
下一篇：有條件的行在R中匯總