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