案例 全選與全不選及反選

2022-08-19 01:15:12 字數 833 閱讀 7457

效果圖如下:點選全選時會全部選中;全不選時全部不選;反選時反向選中.

html結構**:

js**實現過程:

/*一:需求分析:

(1)點選全選:選中所有選擇框(設定checked屬性為true)

(2)點選全不選:不選中所有選擇框(設定checked屬性為false)

(3)點選反選:讓每乙個選擇框的checked屬性與自身相反

二:思路分析

1.獲取元素

2.註冊事件

3.事件處理

*///1.獲取頁面元素

var checkall = document.getelementbyid('checkall');//全選

var uncheckall = document.getelementbyid('uncheckall');//全不選

var reversecheck = document.getelementbyid('reversecheck');//反選

var checklist = document.getelementsbyclassname('check');//選擇框列表

//2.註冊事件

全選checkall.onclick = function()

} 全不選

uncheckall.onclick = function()

} 反選

reversecheck.onclick = function()else}}

jquery全選 全不選 反選技巧

按鈕 全選 取消全選 反選用函式,可以實現分頁的ajax傳值後生成的頁面,也能全選,取消全選,反選 選中所有 function selectall 取消選中所有 function unselect 反選 function reverseselect else 注 最好用prop屬性 判斷input框...

jQuery實現全選 全不選和反選

廖雪峰官網的jquery例子 function var flag false 是否是全選狀態,因為全選和全不選共用選擇框 selectall.change function else selectall.prop checked false 文字變反,選擇也相應變反 invertselect.cli...

jQuery全選 全不選 反選的簡潔寫法

全選方面的功能幾乎是每個需要列表展示的 所必不可少的,當然此功能也有很多種寫法,現在介紹一下,比較簡潔易懂的寫法 type checkbox name gogf type checkbox name gogf type checkbox name gogf id all xuan 全選button ...