基于JS實現(xiàn)checkbox全選功能實例代碼
更新時間:2016年10月31日 09:05:09 作者:xiaoLong2345
最近做了個項目其中有這樣的需求要求實現(xiàn)點擊全選選中所有菜單,再次點擊全選取消選中。下面小編給大家分享實現(xiàn)代碼,對js實現(xiàn)checkbox全選功能感興趣的朋友參考下吧
需求:要求實現(xiàn)點擊全選選中所有菜單,再次點擊全選取消選中。此功能經(jīng)常會用戶,下面小編給大家分享下實現(xià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實現(xiàn)checkbox全選功能實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
頁面的展示,從外到內(nèi)的容器為:屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi),頁面展現(xiàn)在瀏覽器內(nèi),而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當前分辨率下的高度和寬度(分辨率不同,值就不相同)。2023-02-02js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法
下面小編就為大家?guī)硪黄狫avaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07