快捷導(dǎo)航

JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選

更新時(shí)間：2020年11月20日 15:07:04 作者：我是Dreamer啊

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS網(wǎng)頁–全選和取消全選，供大家參考，具體內(nèi)容如下

表格，初始狀態(tài)下復(fù)選框都是未選中狀態(tài)，選中表頭的復(fù)選框后，下面幾個(gè)復(fù)選框變?yōu)檫x中狀態(tài)，取消表頭復(fù)選框選中狀態(tài)后，下面幾個(gè)復(fù)選框選中狀態(tài)也隨之取消；下面的幾個(gè)復(fù)選框同時(shí)選中時(shí)，表頭的復(fù)選框也隨之選中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全選和取消全選</title>
  <style>
    table {
      width: 200px;
      border-collapse: collapse;
      margin: 100px auto;
    }
    table thead {
      font-size: 16px;

      background-color: skyblue;
    }
    table th {
      border: 1px solid black;
    }
    table td {
      border: 1px solid black;
      font-size: 14px;
      
    }

  </style>
</head>
<body>
  <table>
    <thead >
      <tr>
        <th><input type="checkbox" id="j_cbAll"></th>
        <th>手機(jī)品牌</th>
        <th>價(jià)格</th>
      </tr>
    </thead>
    <tbody id="j_tb">
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)1</td>
        <td>5000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)2</td>
        <td>6000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手機(jī)3</td>
        <td>7000</td>
      </tr>
    </tbody>
  </table>
  <script>
    //選擇全選 下面復(fù)選框設(shè)置為checked；
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
    j_cbAll.onclick = function(){
      console.log(this.checked);
      for (var i =0 ;i < j_tbs.length;i++){
        j_tbs[i].checked = this.checked; 
      }
    }
    //下面復(fù)選框均為checked 全選復(fù)選框?yàn)閏hecked；
    for(var j = 0;j < j_tbs.length; j++){
      j_tbs[j].onclick = function(){
        var flag =true;
        for(var i=0;i<j_tbs.length;i++){
          if(!j_tbs[i].checked){
            flag=false;
            break;
          }
        }
        j_cbAll.checked = flag;
      }

    }
      
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
數(shù)組Array的一些方法(總結(jié))
下面小編就為大家?guī)硪黄獢?shù)組Array的一些方法(總結(jié))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
JSON簡介以及用法匯總
JSON（JavaScript Object Notation）即JavaScript對(duì)象表示法，是一種輕量級(jí)的數(shù)據(jù)交換格式。它非常便于編程人員對(duì)數(shù)據(jù)的處理，也便于機(jī)器對(duì)數(shù)據(jù)的解析和生成，應(yīng)用非常廣泛
2016-02-02
uniapp高頻面試題及答案合集
uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可以發(fā)布到IOS、Android、Web（響應(yīng)式）、以及各種小程序、快應(yīng)用等多個(gè)平臺(tái),下面這篇文章主要給大家介紹了關(guān)于uniapp高頻面試題及答案的相關(guān)資料,需要的朋友可以參考下
2023-02-02
分享JavaScript與Java中MD5使用兩個(gè)例子
這篇文章主要為大家分享了JavaScript與Java中MD5使用兩個(gè)例子，
2015-12-12
基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
2022年中秋佳節(jié)即將來臨，中秋節(jié)是我們國家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會(huì)聯(lián)系在一起，本文將用Threejs做一只會(huì)動(dòng)的3D玉兔，感興趣的可以了解一下
2022-08-08
js隱式全局變量造成的bug示例代碼
一段js代碼遇到一個(gè)bug，由于中間的隱式全局變量造成的，通過谷歌瀏覽器的js調(diào)試器才找到問題所在，下面將代碼與大家分享下
2014-04-04
必備的JS調(diào)試技巧匯總
試想一下：出現(xiàn)了某個(gè)bug，有人用幾分鐘就搞定了，有人用了半天或者一天都找不到原因所在。你愿意當(dāng)前者還是后者呢？想當(dāng)前者的就請(qǐng)好好看完本篇文章吧。文中涉及較多Gif演示動(dòng)畫請(qǐng)注意。
2016-07-07
js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法,涉及javascript字符串截取操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)滑塊驗(yàn)證登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07