基于JS實現(xiàn)checkbox全選功能實例代碼
更新時間：2016年10月31日 09:05:09 作者：xiaoLong2345
最近做了個項目其中有這樣的需求要求實現(xiàn)點擊全選選中所有菜單，再次點擊全選取消選中。下面小編給大家分享實現(xiàn)代碼，對js實現(xiàn)checkbox全選功能感興趣的朋友參考下吧
需求：要求實現(xiàn)點擊全選選中所有菜單，再次點擊全選取消選中。此功能經常會用戶，下面小編給大家分享下實現(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全選功能實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)小米輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了淺談Javascript數(shù)組的使用的相關資料,包括數(shù)組的大小，數(shù)組的遍歷以及數(shù)組的一些方法，非常細致，需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了微信小程序自定義組件與頁面的相互傳參過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了js實現(xiàn)簡單折疊、展開菜單的方法,涉及javascript動態(tài)操作頁面元素變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js中值引用和地址引用,結合實例形式分析了javascript值引用和地址引用相關原理、用法及操作注意事項,需要的朋友可以參考下2019-06-06
因為最近要控制廣告，所以從綠盟與腳本之家頁面上，整理了一些cookies的操作控制代碼，喜歡的朋友不容錯過。2010-04-04
這篇文章主要給大家詳細介紹了javascript中if和switch，==和===的區(qū)別和聯(lián)系，十分的細致實用，有需要的小伙伴可以參考下。2015-07-07
最近常有人在Q群里發(fā)問諸如"怎樣讓js操作文件"、"怎樣讓js實現(xiàn)多線程"等問題。2010-03-03
在一些電商網站上，經常看到有商品圖片被放大查看的功能，所以本文將使用前端技術實現(xiàn)一個簡單的圖片放大鏡功能，希望能給大家?guī)硪欢ǖ膸椭?/div> 2023-06-06
Popup對象實現(xiàn)右鍵菜單...2006-09-09最新評論