js實現全選和全不選功能
更新時間：2020年07月28日 14:18:25 作者：哀愁
這篇文章主要為大家詳細介紹了js實現全選和全不選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現全選和全不選的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作復選框</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
//使每一個復選框的屬性中的checked和全選的屬性保持一致即可實現（不完善）
for (let i = 0; i <aihao.length ; i++) {
aihao[i].checked=firstChecbox.checked;
}
}
//如果選中的數量和愛好的總數量一致的就把全選給選中，否則不全選
//為每一個aihao綁定單擊事件
var all=aihao.length;
for (let i = 0; i < aihao.length; i++) {
//綁定單擊事件
aihao[i].onclick=function () {
//定義選中的數量
var checkedCount=0;
for (let i = 0; i < aihao.length; i++) {
//如果愛好選中就把選中的數量+1;
if (aihao[i].checked){
checkedCount++;
}
//如果選中的數量和總數相當就把全選給勾選
if (checkedCount==all){
firstChecbox.checked=true
}
else{
firstChecbox.checked=false;
}
}
}
}
}
</script>
更多關于復選框的文章請點擊專題：javascript復選框操作匯總、jquery復選框操作匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了json格式判斷函數速記示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了javascript實現行拖動的方法,涉及javascript鼠標事件及頁面元素的相關操作技巧,需要的朋友可以參考下2015-05-05
本段js和html兩段代碼實現分頁控件效果，下面通過本文給大家詳細介紹下基于KO+BootStrap+MVC實現的分頁控件，非常不錯，感興趣的朋友一起看看吧2016-11-11
這篇文章主要介紹了JavaScript函數重載操作,結合一次面試經歷分析了JavaScript函數重載相關原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
js提示框替代系統(tǒng)alert,自動關閉alert對話框的實現方法
下面小編就為大家?guī)硪黄猨s提示框替代系統(tǒng)alert,自動關閉alert對話框的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
下面小編就為大家?guī)硪黄猨s數字計算 誤差問題的快速解決方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了JavaScript Html實現移動端紅包雨功能頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
本文介紹了如何使用Javascript中的this關鍵字，文中代碼簡單易懂，對大家的學習或工作有一定幫助，需要的朋友可以參考下2020-05-05
這篇文章主要給大家介紹了關于uniapp?h5如何獲取用戶地理位置信息的相關資料,文中主要使用高德地圖,這里主要講h5實現獲取地理位置信息并定位功能,需要的朋友可以參考下2023-08-08
因為使用 Cycle.js 的 Vite + TSX 所以想詳細的探索 TSX 在 TS 配置中的編譯情況,本文主要講解 tsconfig 和 tsx 編譯與配置,以常見的框架 PReact 的虛擬 DOM + TSX 組合、snabbdom + TSX 組合不同的配置以及編譯輸出2023-09-09