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