基于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-02
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本篇文章主要介紹了js制作簡單的音樂播放器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript的數(shù)據(jù)類型是非常弱的（不然不會叫它做弱類型語言了）！在使用算術運算符時，運算符兩邊的數(shù)據(jù)類型可以是任意的，比如，一個字符串可以和數(shù)字相加2016-03-03
WebRTC技術包含了音視頻編解碼技術、傳輸技術、流媒體服務器技術等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關于如何基于webRTC實現(xiàn)人臉識別的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了HTML+JavaScript實現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)底部彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法
下面小編就為大家?guī)硪黄狫avaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
本文通過簡單代碼給大家介紹了js解析url查詢參數(shù)的方法，然后在文章下面給大家介紹了js獲取url參數(shù)值的兩種方式 ，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
本篇文章主要介紹了詳解cordova打包成webapp的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10