js實現(xiàn)全選和全不選功能
更新時間：2020年07月28日 14:18:25 作者：哀愁
這篇文章主要為大家詳細介紹了js實現(xiàn)全選和全不選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)全選和全不選的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作復(fù)選框</title>
</head>
<body>
<input type="checkbox" id="quan"> 全選<br>
<input type="checkbox" name="aihao">游戲<br>
<input type="checkbox" name="aihao">睡覺<br>
</body>
</html>
<script type="text/javascript">
window.onload=function () {
var firstChecbox = document.getElementById("quan");
var aihao=document.getElementsByName("aihao");
//完成全選和全不選
//當單擊全選時使下方的checkbox中的checked屬性為true
firstChecbox.onclick=function () {
//遍歷下方的checkbox
//使每一個復(fù)選框的屬性中的checked和全選的屬性保持一致即可實現(xiàn)（不完善）
for (let i = 0; i <aihao.length ; i++) {
aihao[i].checked=firstChecbox.checked;
}
}
//如果選中的數(shù)量和愛好的總數(shù)量一致的就把全選給選中，否則不全選
//為每一個aihao綁定單擊事件
var all=aihao.length;
for (let i = 0; i < aihao.length; i++) {
//綁定單擊事件
aihao[i].onclick=function () {
//定義選中的數(shù)量
var checkedCount=0;
for (let i = 0; i < aihao.length; i++) {
//如果愛好選中就把選中的數(shù)量+1;
if (aihao[i].checked){
checkedCount++;
}
//如果選中的數(shù)量和總數(shù)相當就把全選給勾選
if (checkedCount==all){
firstChecbox.checked=true
}
else{
firstChecbox.checked=false;
}
}
}
}
}
</script>
更多關(guān)于復(fù)選框的文章請點擊專題：javascript復(fù)選框操作匯總、jquery復(fù)選框操作匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了javascript實現(xiàn)圖片自動輪播切換特效，圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下2015-07-07
使用戶點擊后退按鈕使效三行代碼...2007-07-07
在現(xiàn)代Web應(yīng)用中,為了提升用戶體驗并確保系統(tǒng)的穩(wěn)定性和一致性,部署前端版本更新后及時提醒用戶進行頁面刷新是至關(guān)重要的,所以本文給大家介紹了基于前端實現(xiàn)版本更新自動檢測的流程步驟,需要的朋友可以參考下2025-03-03
javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實例
如果想實現(xiàn)頁面的一些函數(shù)的定時執(zhí)行，需要用到下面的函數(shù)大家可以看下用法。2009-08-08
淺析JavaScript如何解決跨域問題并手寫一個jsonp
跨域是指瀏覽器為了安全性,實施的同源策略,同源策略要求,只有協(xié)議、域名和端口號完全相同的網(wǎng)頁,才能共享資源,本文整理了一些常用的跨域解決方法,希望對大家有所幫助2024-03-03
這篇文章主要介紹了js對象繼承之原型鏈繼承,以實例形式分析了原型鏈繼承的實現(xiàn)方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
獲取瀏覽器名稱及版本信息,如果當前瀏覽器是IE，彈出瀏覽器版本,否則彈出當前瀏覽器名稱和版本，詳細實現(xiàn)代碼請參考本文2013-04-04
這篇文章主要介紹了JavaScript缺少insertAfter解決方案,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了JS解決position:sticky的兼容性問題的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10