基于JS實(shí)現(xiàn)checkbox全選功能實(shí)例代碼
需求:要求實(shí)現(xiàn)點(diǎn)擊全選選中所有菜單,再次點(diǎn)擊全選取消選中。此功能經(jīng)常會(huì)用戶,下面小編給大家分享下實(shí)現(xiàn)代碼,一起看看吧!
效果圖如下:
點(diǎn)擊全選之前:
點(diǎn)擊全選之后:
再次點(diǎn)擊全選之后:
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox" onclick="quanxuan()">全選 <input type="checkbox" name="nation">唱歌 <input type="checkbox" name="nation">跳舞 <input type="checkbox" name="nation">書法 </body> <script type="text/javascript"> var k=0; function quanxuan(){ var s=document.getElementsByName("nation"); if(k%2==0) { for(var i=0;i< s.length;i++) { s[i].checked=true; } k++; } else { for(var j=0;j< s.length;j++) { s[j].checked=false; } k++; } } </script> </html>
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)checkbox全選功能實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS實(shí)現(xiàn)CheckBox復(fù)選框全選全不選功能
- javascript使用avalon綁定實(shí)現(xiàn)checkbox全選
- js實(shí)現(xiàn)checkbox全選、不選與反選的方法
- 兩種不同的方法實(shí)現(xiàn)js對(duì)checkbox進(jìn)行全選和反選
- js實(shí)現(xiàn)checkbox全選和反選示例
- JS+JSP checkBox 全選具體實(shí)現(xiàn)
- js操作CheckBoxList實(shí)現(xiàn)全選/反選(在客服端完成)
- Gridview使用CheckBox全選與單選采用js實(shí)現(xiàn)同時(shí)高亮顯示選擇行
相關(guān)文章
JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對(duì)比整理
頁面的展示,從外到內(nèi)的容器為:屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi),頁面展現(xiàn)在瀏覽器內(nèi),而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對(duì)象可以獲取這些容器的高度、寬度。容器的尺寸是指當(dāng)前分辨率下的高度和寬度(分辨率不同,值就不相同)。2023-02-02js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實(shí)現(xiàn)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能
WebRTC技術(shù)包含了音視頻編解碼技術(shù)、傳輸技術(shù)、流媒體服務(wù)器技術(shù)等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下2022-12-12HTML+JavaScript實(shí)現(xiàn)掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了HTML+JavaScript實(shí)現(xiàn)掃雷小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫avaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07