checkbox 一鍵全選與取消全選

2021-08-21 18:43:08 字數 695 閱讀 8037

使用jquery實現的乙個checkbox一鍵全選小demo,能夠一鍵全選,也能夠一鍵取消全選(都選中的情況下才能一鍵取消全選),如果全選狀態下某個checkbox取消勾選,一鍵全選checkbox也會被取消。個人感覺這個小demo通用性很好。

先附上我的小demo**(為了方便測試檢視效果,我直接將整個html文件**copy過來了):

全選

主要思想(屬性、事件皆為jquery):

給每個需要參加全選的input[type='checkbox']設定乙個相同的name, 然後記錄這些相同name的checkbox的數量checkboxitemnum

監聽全選checkbox的change事件,給它加處理函式:如果當前狀態為checked(prop("checked") 值為true),則將name相同的那些checkbox狀態設定為checked(prop("checked")的 值設定為true),反之prop("checked")的值設定為為false

監聽每個checkbox的change事件,如果有某個checkbox狀態改變,則對比現在選中的checkbox數量與所有的checkbox數量checkboxitemnum,如果不相同,則說明沒有全選中,此時需要將全選checkbox 的prop("checked") 值為false。

我的語言描述大概就是這樣,建議最好看**,看完就有一目了然的感覺。

核取方塊CheckBox的全選與取消全選功能

在前端開發,尤其是table的開發中,經常會在列表左上角有乙個全選按鈕,今天就來分享乙個全選按鈕的邏輯實現 type checkbox id selall th 序號th thead type checkbox name check td 1td tr type checkbox name chec...

checkbox的全選與反選

最近在做乙個專案,其中乙個功能就是多選框的全選與反選。感覺很簡單的小功能,一下子想不起來怎麼實現了,很是耽誤時間。我在想,我有必要整理下自己的一些小demo了,也方便以後再使用的時候能快速的完成功能。加注釋很清晰,見 1 doctype html 2 html 34 head lang en 5 m...

checkbox 的全選與全不選

checkbox 的全選與全不選 只需要呼叫 cekall.check 方法,這個方法接收兩個引數 引數一 全選按鈕的 id 以字串的形式寫 引數二 其他 checkbox 的 name 值 也是以字串的形式寫 使用很簡單 複製 js 到你的 js 檔案的任何地方,只需要在html文件載入完以後呼叫...