整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Javascript:簡單易懂的,復選框聯動全選,很

          Javascript:簡單易懂的,復選框聯動全選,很實用!

          果您覺得該文章對您有幫助,讓更多人受用,請關注“鍵盤碼農”,轉發該文章。謝謝您的支持!

          今天跟大家寫了一份js的聯動全選的源碼,代碼少,清晰易懂。

          效果是這樣的:

          點擊全選下面的就會被全部全選,或者下面的被一一選擇,全選按鈕也會被選中。運用復選框來實現的聯動全選的功能。

          點擊上面的復選框就會被全選

          Javascript:聯動全選

          當下放的復選框沒有被全選,最上面的全選按鈕未被選中

          復選框聯動全選js代碼實現:

          <!DOCTYPE html>

          <html>

          <head>

          <title></title>

          <meta charset="utf-8">

          <script type="text/javascript">

          window.onload=function ()

          {

          var oBtn1=document.getElementById('btn1');

          var oBox=document.getElementById('box');

          var oInputs=oBox.getElementsByTagName('input');

          oBtn1.onclick=function ()

          {

          if (oBtn1.checked==true) {

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].checked=true;

          }

          } else {

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].checked=false;

          }

          }

          }

          //點擊每一個input框

          for (var i=0; i < oInputs.length; i++) {

          oInputs[i].onclick=function ()

          {

          var n=0;

          for (var i=0; i < oInputs.length; i++) {

          if (oInputs[i].checked==true) {

          n++;

          }

          }

          if (n==oInputs.length) {

          oBtn1.checked=true;

          } else {

          oBtn1.checked=false;

          }

          }

          }

          }

          </script>

          </head>

          <body>

          <h1>全選/全不選</h1>

          <input type="checkbox" id="btn1">

          <div id="box">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          <input type="checkbox" name="">

          </div>

          </body>

          </html>

          相對比較簡單,對于初學者應該有很好的幫助!請關注鍵盤碼農。后期繼續更新,如有什么看法請在下方評論。第一時間為您解答哦!

          <!DOCTYPE HTML>
          <html lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
          <title>省市聯動</title>
          <script>
          function $(id) {
              return document.getElementById(id);
          }
          //定義一個數組
          var sheng=['請選擇','湖北省','湖南省'];
          var shi=[[],['武漢市','孝感市'],['長沙市','株洲市']];
          window.onload=function() {
              for(var i=0;i<sheng.length;i++) {
              var op=new Option(sheng[i],sheng[i]);
              $('sheng').options.add(op);
              }
              $('sheng').onchange=function() {
              var index=$('sheng').selectedIndex;
              $('shi').length=0;
              for(var i=0;i<shi[index].length;i++) {
              var op=new Option(shi[index][i],shi[index][i]);
              $('shi').options.add(op);
              }
              }
          }
          </script>
          </head>
          <body>
          <select id='sheng'></select>
          <select id='shi'></select>
          </body>
          </html>
          

          用javascript中變量定義省份及對應的城市,應用Select標簽對象,實現二級級聯的下拉菜單選中效果。也就是說,在省份下拉菜單中,選中一個省份時,在城市下拉菜單中出現對應城市選擇內容,效果如下:

          當選擇廣東為省份的時候,城市欄會自動識別廣東省下的城市展示出來

          當省份選擇廣東省份的時候,去點擊城市的選擇欄會出現廣東對應的城市選擇!

          具體代碼如下:

          html:

          javascript:


          主站蜘蛛池模板: 国产一区二区三区在线免费观看| 3D动漫精品一区二区三区| 91一区二区视频| 合区精品久久久中文字幕一区| 乱色精品无码一区二区国产盗| 久久99国产一区二区三区| 中日韩精品无码一区二区三区| 3d动漫精品啪啪一区二区免费 | 天堂资源中文最新版在线一区| 日韩在线一区二区三区免费视频| 蜜桃传媒一区二区亚洲AV| 久久久国产精品亚洲一区 | 最新中文字幕一区| 中文字幕日韩丝袜一区| 日本一区二区在线| 亚洲国产日韩一区高清在线| 国产亚洲一区二区三区在线不卡 | 亚洲av无码一区二区三区在线播放 | 精品视频一区二区三区四区| 射精专区一区二区朝鲜| 搡老熟女老女人一区二区| 亚洲乱码一区二区三区在线观看 | 日本一区二区高清不卡| 国产一区二区三区日韩精品| 无码毛片一区二区三区中文字幕 | 日本一区午夜爱爱| 亚洲午夜精品第一区二区8050| 亚洲视频在线一区二区| 国产成人精品一区二区三区无码| 亚洲夜夜欢A∨一区二区三区| 国产一区二区三区在线2021| 99久久精品国产一区二区成人| 亚洲国产日韩在线一区| 亚洲AV成人一区二区三区观看 | 色综合视频一区二区三区| 久久国产三级无码一区二区| 久久综合精品不卡一区二区| 日本一区二区三区爆乳| 内射少妇一区27P| 成人日韩熟女高清视频一区| 精品无码成人片一区二区98 |