全選或全不選

2022-08-23 12:18:12 字數 2925 閱讀 7823

1.確定事件:最上面那個核取方塊的單擊事件 onclick

2.編寫函式:讓所有的核取方塊和最上面的核取方塊保持一致

a.獲取最上面這個核取方塊選中狀態   通過checkbox的checked屬性即可

b.獲取其他的核取方塊,設定他們的checked屬性即可

可以通過

document.getelementsbyclassname() 需要給下面所有的checkbox新增class屬性

document.getelementsbyname()  需要給下面所有的checkbox新增name屬性

3.效果圖:

th>分類id

th>

<

th>分類名稱

th>

<

th>分類描述

th>

<

th>操作

th>

tr>

<

tr>

<

td><

input

type

="checkbox"

class

="itemselect"

>

td>

<

td>1

td>

<

td>手機數碼

td>

<

td>手機數碼類商品

td>

<

td><

a href

="">修改

a>|<

a href

="">刪除

a>

td>

tr>

<

tr>

<

td><

input

type

="checkbox"

class

="itemselect"

>

td>

<

td>2

td>

<

td>電腦辦公

td>

<

td>電腦辦公類商品

td>

<

td><

a href

="">修改

a>|<

a href

="">刪除

a>

td>

tr>

<

tr>

<

td><

input

type

="checkbox"

class

="itemselect"

>

td>

<

td>3

td>

<

td>鞋靴箱包

td>

<

td>鞋靴箱包類商品

td>

<

td><

a href

="">修改

a>|<

a href

="">刪除

a>

td>

tr>

<

tr>

<

td><

input

type

="checkbox"

class

="itemselect"

>

td>

<

td>4

td>

<

td>家居飾品

td>

<

td>家居飾品類商品

td>

<

td><

a href

="">修改

a>|<

a href

="">刪除

a>

td>

tr>

table

>

body

>

html

>

步驟分析:

1.確定事件    核取方塊的單擊事件

2.函式中

a.獲取該核取方塊的選中狀態    attr(獲取不了checked屬性) | prop

b.獲取所有核取方塊修改他們的狀態

注意:若jquery版本》1.6    統一使用  prop操作元素的屬性

vue實現全選全不選

全選功能可以說是前端開發中非常常見的乙個功能,以前的專案開發用jquery開發比較多。最近在使用vue前端框架重構之前的專案。從jquery到vue的轉變主要是乙個思想想的轉變,是將原有的直接操作dom的思想轉變到運算元據,用資料驅動dom,也是vue框架的乙個核心思想,思想轉變過來,對功能的實現自...

checkbox全選和全不選

每次寫都會出現問題,每次.jquery1.6之後改了prop 可是attr也可以用,我這裡,checkall click function else var flag true input name checkbox each function else if flag else 這樣在html或其...

js全選 全不選功能

實現功能 1.全選 2.全不選 3.每條資料被勾選後,全選框變成被勾選狀態 4.勾選全選框,取消某條資料的勾選,全選框變成未勾選狀態 直接看demo label標籤和類名ui checkbox ui checkbox inline是在checkbox.css中對核取方塊做了美化 全選 反選 1 2 ...