用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能
更新時(shí)間：2017年06月12日 16:13:26 作者：碼農(nóng)的N次方
這篇文章主要介紹了用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<input id="cheakAll" type="checkbox">全選
<div>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
</html>
<script>
//找到全選按鈕
var oChkAllBtn=document.getElementById('cheakAll');
var oDiv=document.getElementsByTagName('div')[0];
var aInput=oDiv.getElementsByTagName('input');
var n=0; //計(jì)數(shù)器
//alert(aInput.length);
//點(diǎn)擊全選按鈕，讓其他的全部選中
oChkAllBtn.onclick=function(){
//判斷我是什么狀態(tài)
/*if(this.checked==true){
for(var i=0; i<aInput.length; i++){
aInput[i].checked=true;
}
}else{
for(var i=0; i<aInput.length; i++){
aInput[i].checked=false;
}
}*/
for(var i=0; i<aInput.length; i++){
if(this.checked==true){//判斷全選按鈕自己的狀態(tài)
aInput[i].checked=true;
n=aInput.length; //控制計(jì)數(shù)器
}else{
aInput[i].checked=false;
n=0; //控制計(jì)數(shù)器
}
};
};
//--------------------------------------------
//每一個(gè)按鈕綁定事件
for(var j=0; j<aInput.length; j++){
aInput[j].onclick=function(){
//如果我自己是cheaked狀態(tài) n++ 否則 n--
if(this.checked==true){
n++;
}else{
n--;
};
//console.log(n);
//如果n==aInput.length
if(n==aInput.length){
oChkAllBtn.checked=true;
}else{
oChkAllBtn.checked=false;
}
};
};
</script>
以上所述是小編給大家介紹的用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定
- ExtJS Grid使用SimpleStore、多選框的方法
- JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法
- ExtJS 下拉多選框lovcombo
- javascript 單選框，多選框美化代碼
- 兼容ie和firefox版本的js反選 全選 多選框
- 用 Javascript 驗(yàn)證表單(form)中多選框(checkbox)值
- html+javascript+bootstrap實(shí)現(xiàn)層級(jí)多選框全層全選和多選功能
- AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定
- JS實(shí)現(xiàn)多選框的操作
相關(guān)文章
webpack是如何實(shí)現(xiàn)模塊化加載的方法
這篇文章主要介紹了webpack是如何實(shí)現(xiàn)模塊化加載的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了Web?Woker常見使用問題及方案解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
JavaScript事件Event對(duì)象詳解(屬性、方法、自定義事件)
Event對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對(duì)象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下2024-01-01
JavaScript基礎(chǔ)知識(shí)之方法匯總結(jié)
本文給大家分享了javascript基礎(chǔ)知識(shí)，包括數(shù)組的方法，函數(shù)的方法，數(shù)字的方法，對(duì)象的方法，字符串的方法，常規(guī)方法，正則表達(dá)式方法，本文介紹的非常詳細(xì)，具有參考價(jià)值特此分享供大家參考2016-01-01
javascript實(shí)現(xiàn)textarea中tab鍵的縮排處理方法
這篇文章主要介紹了javascript實(shí)現(xiàn)textarea中tab鍵的縮排處理方法,涉及javascript處理鼠標(biāo)事件及頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-06-06
Javascript運(yùn)行機(jī)制之Event Loop
這篇文章主要介紹了Javascript運(yùn)行機(jī)制之Event Loop，在學(xué)習(xí)Event Loop前，首先需要了解的幾個(gè)概念Javascript是單線程、任務(wù)隊(duì)列、同步任務(wù)、異步任務(wù)、Javascript執(zhí)行棧，下面來看看文章的詳細(xì)介紹吧2021-12-12
這篇文章主要為大家詳細(xì)介紹了js輪播圖之旋轉(zhuǎn)木馬效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
這篇文章主要介紹了JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能,結(jié)合完整實(shí)例形式分析了基于瀏覽器端插件jsPDF實(shí)現(xiàn)的HTML格式數(shù)據(jù)轉(zhuǎn)換成pdf具體操作技巧,需要的朋友可以參考下2018-02-02
JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS點(diǎn)擊圖片彈出文件選擇框并覆蓋原圖功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
JS分成三個(gè)大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是讓前端開發(fā)建立基本的編程思維。但是要想真正來寫一個(gè)更加復(fù)雜的有交互式的頁(yè)面,還需要WebAPI的支持，相當(dāng)于把后端編程實(shí)現(xiàn)成前端交互。DOM+BOM就組成了WebAPI2022-06-06