Js實現(xiàn)復選框的全選、全不選反選功能代碼實例

更新時間：2020年02月28日 15:22:32 作者：Tynam.Yang

這篇文章主要介紹了Js實現(xiàn)復選框的全選、全不選和反選,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

主要是用遍歷的方法查找元素，然后通過改變checked的屬性來選擇，為true則是選中狀態(tài)，為false則是未選狀態(tài)

實現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>復選框的選擇</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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實現(xiàn)鼠標點擊后層展開效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)鼠標點擊后層展開效果的方法,可實現(xiàn)點擊文字緩慢展開層的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-05-05
js制作提示框插件
這篇文章主要介紹了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ù)時，讀到的中文都是亂碼，那么我們應該怎么將這些參數(shù)轉(zhuǎn)換呢，接下來與大家分享下將字符串轉(zhuǎn)換成utf-8或者gb2312編碼的參數(shù)的技巧
2013-04-04
微信小程序云開發(fā)之模擬后臺增刪改查
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)之模擬后臺增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
JavaScript實現(xiàn)京東秒殺效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)京東秒殺效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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
輕松學習Javascript閉包函數(shù)
這篇文章主要幫助大家輕松學習掌握Javascript閉包函數(shù)，從閉包的含義出發(fā)，由淺入深學習Javascript閉包函數(shù)，感興趣的小伙伴們可以參考一下
2015-12-12
JS實現(xiàn)點擊鏈接取消跳轉(zhuǎn)效果的方法
有時候我們僅僅希望將鏈接<a>作為一個按鈕使用，但是在默認狀態(tài)下，點擊鏈接會出現(xiàn)跳轉(zhuǎn)效果，下面就通過代碼實例，介紹一下如何實現(xiàn)此效果
2014-01-01
js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
js下通過XMLHttpRequest判斷IE6/IE7/FF的代碼，需要的朋友可以參考下。
2011-02-02