Js實現(xiàn)復(fù)選框的全選、全不選反選功能代碼實例
更新時間：2020年02月28日 15:22:32 作者：Tynam.Yang
這篇文章主要介紹了Js實現(xiàn)復(fù)選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
主要是用遍歷的方法查找元素，然后通過改變checked的屬性來選擇，為true則是選中狀態(tài)，為false則是未選狀態(tài)
實現(xiàn)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>復(fù)選框的選擇</title>
<style>
#btn{
margin: 5px auto;
}
#btn>input{
font-size: 16px;
color: #fff;
background-color: rgb(110, 34, 182);
outline: none;
}
#city{
background-color: aqua;
}
</style>
<script>
window.onload=function(){
var obt1 = document.getElementById('btn1');
var obt2 = document.getElementById('btn2');
var obt3 = document.getElementById('btn3');
var ocity = document.getElementById('city');
var oinput = ocity.getElementsByTagName('input');
obt1.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
oinput[i].checked=true;
}
}
obt2.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
oinput[i].checked=false;
}
}
obt3.onclick=function(){
for(var i=0;i<oinput.length;i++)
{
if(oinput[i].checked==false)
{
oinput[i].checked=true;
}else{
oinput[i].checked=false;
}
}
}
}
</script>
</head>
<body>
<div id="btn">
<input type="button" id="btn1" value="全選">
<input type="button" id="btn2" value="全不選">
<input type="button" id="btn3" value="反選">
</div>
<div id="city">
<input type="checkbox">北京<br>
<input type="checkbox">上海<br>
<input type="checkbox">廣州<br>
<input type="checkbox">深圳<br>
<input type="checkbox">武漢<br>
</div>
</body>
</html>
結(jié)果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)鼠標(biāo)點擊后層展開效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標(biāo)點擊后層展開效果的方法,可實現(xiàn)點擊文字緩慢展開層的效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了js制作提示框插件的方法，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12
使用Browserify來實現(xiàn)CommonJS的瀏覽器加載方法
下面小編就為大家?guī)硪黄褂肂rowserify來實現(xiàn)CommonJS的瀏覽器加載方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
將字符串轉(zhuǎn)換成gb2312或者utf-8編碼的參數(shù)(js版)
直接在url中傳遞中文參數(shù)時，讀到的中文都是亂碼，那么我們應(yīng)該怎么將這些參數(shù)轉(zhuǎn)換呢，接下來與大家分享下將字符串轉(zhuǎn)換成utf-8或者gb2312編碼的參數(shù)的技巧2013-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)之模擬后臺增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)京東秒殺效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile(2022年最新版)
微信在最近開始要求使用wx.getUserProfile()來獲取用戶的昵稱,頭像等信息,所以下面這篇文章主要給大家介紹了關(guān)于2022年最新版微信小程序授權(quán)登錄實現(xiàn)方案wx.getUserProfile的相關(guān)資料,需要的朋友可以參考下2022-11-11
輕松學(xué)習(xí)Javascript閉包函數(shù)
這篇文章主要幫助大家輕松學(xué)習(xí)掌握J(rèn)avascript閉包函數(shù)，從閉包的含義出發(fā)，由淺入深學(xué)習(xí)Javascript閉包函數(shù)，感興趣的小伙伴們可以參考一下2015-12-12
JS實現(xiàn)點擊鏈接取消跳轉(zhuǎn)效果的方法
有時候我們僅僅希望將鏈接<a>作為一個按鈕使用，但是在默認(rèn)狀態(tài)下，點擊鏈接會出現(xiàn)跳轉(zhuǎn)效果，下面就通過代碼實例，介紹一下如何實現(xiàn)此效果2014-01-01![js判斷IE6/IE7/FF的代碼[XMLHttpRequest]](http://img.jbzj.com/images/xgimg/bcimg9.png)
js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
js下通過XMLHttpRequest判斷IE6/IE7/FF的代碼，需要的朋友可以參考下。2011-02-02