欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)的全選、全不選及反選功能【案例】

 更新時(shí)間：2023年06月12日 19:17:19   作者：庚中  
這篇文章主要介紹了JS實(shí)現(xiàn)的全選、全不選及反選功能,涉及javascript事件響應(yīng)、元素遍歷與屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的全選、全不選及反選功能。分享給大家供大家參考，具體如下：

效果圖如下:點(diǎn)擊全選時(shí)會(huì)全部選中;全不選時(shí)全部不選;反選時(shí)反向選中.

html結(jié)構(gòu)代碼:

<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全選">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反選">

javascript代碼如下: 

<script>
  /*一：需求分析：
      (1)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true）
      (2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false）
      (3)點(diǎn)擊反選：讓每一個(gè)選擇框的checked屬性與自身相反
    二：思路分析
        1.獲取元素
        2.注冊(cè)事件
        3.事件處理
  */
  //1.獲取頁面元素
  var checkAll = document.getElementById('checkAll');//全選
  var unCheckAll = document.getElementById('unCheckAll');//全不選
  var reverseCheck = document.getElementById('reverseCheck');//反選
  var checkList = document.getElementsByClassName('check');//選擇框列表
  //2.注冊(cè)事件
  //2.1 全選
  checkAll.onclick = function(){
    //3.事件處理：選中所有選擇框（設(shè)置checked屬性為true）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不選
  unCheckAll.onclick = function(){
    //3.事件處理:不選中所有選擇框（設(shè)置checked屬性為false）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反選
  reverseCheck.onclick = function(){
    //3.事件處理:讓每一個(gè)選擇框的checked屬性與自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//邏輯非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>

完整示例代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.dbjr.com.cn JS全選、全不選、反選</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全選">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反選">
<script>
  /*一：需求分析：
      (1)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true）
      (2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false）
      (3)點(diǎn)擊反選：讓每一個(gè)選擇框的checked屬性與自身相反
    二：思路分析
        1.獲取元素
        2.注冊(cè)事件
        3.事件處理
  */
  //1.獲取頁面元素
  var checkAll = document.getElementById('checkAll');//全選
  var unCheckAll = document.getElementById('unCheckAll');//全不選
  var reverseCheck = document.getElementById('reverseCheck');//反選
  var checkList = document.getElementsByClassName('check');//選擇框列表
  //2.注冊(cè)事件
  //2.1 全選
  checkAll.onclick = function(){
    //3.事件處理：選中所有選擇框（設(shè)置checked屬性為true）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = true;
    }
  }
  //2.2 全不選
  unCheckAll.onclick = function(){
    //3.事件處理:不選中所有選擇框（設(shè)置checked屬性為false）
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = false;
    }
  }
  //2.3 反選
  reverseCheck.onclick = function(){
    //3.事件處理:讓每一個(gè)選擇框的checked屬性與自身相反
    for(var i = 0;i<checkList.length;i++){
      checkList[i].checked = !checkList[i].checked;//邏輯非取反
      // if (checkList[i].checked == true){
      //   checkList[i].checked = false;
      // }else{//false
      //   checkList[i].checked = true;
      // }
    }
  }
</script>
</body>
</html>

實(shí)例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微軟雅黑";
      color: #fff;
    }
    td {
      font: 14px "微軟雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>品牌</th>
      <th>價(jià)格</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>諾基亞</td>
      <td>￥3000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>索尼愛立信</td>
      <td>￥4500</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>華為</td>
      <td>￥5000</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>vivo</td>
      <td>￥2700</td>
    </tr>
    </tbody>
  </table>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }
  //獲取全選的這個(gè)復(fù)選框
  var ckAll = my$("j_cbAll");
  //獲取tbody中所有的小復(fù)選框
  var cks = my$("j_tb").getElementsByTagName("input");
  //點(diǎn)擊全選的這個(gè)復(fù)選框,獲取他當(dāng)前的狀態(tài),然后設(shè)置tbody中所有復(fù)選框的狀態(tài)
  ckAll.onclick = function () {
    //console.log(this.checked);
    for (var i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked;
    }
  };
  //獲取tbody中所有的復(fù)選框,分別注冊(cè)點(diǎn)擊事件
  for(var i=0;i<cks.length;i++){
    cks[i].onclick=function () {
      var flag=true;//默認(rèn)都被選中了
      //判斷是否所有的復(fù)選框都選中
      for(var j=0;j<cks.length;j++){
        if(!cks[j].checked){
          //沒選中就進(jìn)來了
          flag=false;
          break;
        }
      }
      //全選的這個(gè)復(fù)選框的狀態(tài)就是flag這個(gè)變量的值
      ckAll.checked=flag;
    };
  }
</script>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論