js實(shí)現(xiàn)checkbox全選、不選與反選的方法
更新時(shí)間：2015年02月09日 09:07:21 作者：peerless
這篇文章主要介紹了js實(shí)現(xiàn)checkbox全選、不選與反選的方法,以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過(guò)程,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)checkbox全選、不選與反選的方法。分享給大家供大家參考。具體分析如下：
一、思路：
1. 獲取元素
2. 給全選 不選 反選添加點(diǎn)擊事件
3. 用for循環(huán)checkbox
4. 把checkbox的checked設(shè)置為true即實(shí)現(xiàn)全選
5. 把checkbox的checked設(shè)置為false即實(shí)現(xiàn)不選
6. 通過(guò)if判斷，如果checked為true選中狀態(tài)的，就把checked設(shè)為false不選狀態(tài)，如果checked為false不選狀態(tài)的，就把checked設(shè)為true選中狀態(tài)。
二、html代碼：
<input type="button" value="全選" id="sele"/>
<input type="button" value="不選" id="setinterval"/>
<input type="button" value="反選" id="clear"/>
<div id="checkboxs">
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
<input type="checkbox"/><br />
</div>
三、js代碼：
<script>
window.onload=function(){
var sele=document.getElementById('sele');//獲取全選
var unsele=document.getElementById('setinterval');//獲取不選
var clear=document.getElementById('clear');//獲取反選
var checkbox=document.getElementById('checkboxs');//獲取div
var checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不選
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反選
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單的實(shí)例代碼
通過(guò)控制器創(chuàng)建一個(gè)Index視圖，寫入下列HTML代碼，這里我創(chuàng)建了一個(gè)分部視圖，不創(chuàng)建直接寫在同一個(gè)頁(yè)面也是一樣的效果。這篇文章主要介紹了Bootbox將后臺(tái)JSON數(shù)據(jù)填充Form表單 ,需要的朋友可以參考下2018-09-09
微信小程序阻止頁(yè)面返回實(shí)例詳解(包滑動(dòng)、自動(dòng)返回鍵)
小程序如果在頁(yè)面內(nèi)進(jìn)行復(fù)雜的界面設(shè)計(jì),用戶進(jìn)行返回操作會(huì)直接離開當(dāng)前頁(yè)面,不符合用戶預(yù)期,下面這篇文章主要給大家介紹了關(guān)于微信小程序阻止頁(yè)面返回(包滑動(dòng)、自動(dòng)返回鍵)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了IE及IE6瀏覽器中判斷JS文件加載成功失敗的方法,本文使用vbscript來(lái)解決這個(gè)問(wèn)題,需要的朋友可以參考下2015-02-02
20170918 前端開發(fā)周報(bào)之JS前端開發(fā)必看
本文給大家分享了最新版js 前端開發(fā)周報(bào)，內(nèi)容非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了移動(dòng)前端開發(fā)之viewport的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
本篇文章是對(duì)使用JS清空File控件的路徑值的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
JS實(shí)現(xiàn)點(diǎn)擊顏色塊切換指定區(qū)域背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊顏色塊切換指定區(qū)域背景顏色的方法,涉及javascript操作cookie及背景色的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
跟網(wǎng)上的一些常用的不太一樣，個(gè)人都有個(gè)人常用的代碼，大家看到好東西，不一定什么都會(huì)，起碼要知道有這么個(gè)東西。方便以后用也方便找。2009-04-04
淺談javascript語(yǔ)法和定時(shí)函數(shù)
初學(xué)者可能對(duì)Javascript的定時(shí)器有誤解，認(rèn)為它們是線程，其實(shí)Javascript是運(yùn)行于單線程中的，而定時(shí)器僅僅是計(jì)劃在未來(lái)的某個(gè)時(shí)間執(zhí)行，而具體的執(zhí)行時(shí)間是不能保證的，因?yàn)樵陧?yè)面的生命周期中，不同的時(shí)間可能有其它代碼在控制Javascript的里進(jìn)程。2015-05-05
JS實(shí)現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁(yè)面示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取word文檔內(nèi)容并輸出顯示到html頁(yè)面,結(jié)合實(shí)例形式分析了JavaScript使用ActiveXObject組建操作word文件的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06