js實現全選反選 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

//js實現全選反選源代碼,超級簡單
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="https://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>反選全選</title>
<style type="text/css">
table{
    border:#0FF 1px solid;
    border-collapse:collapse;
    }
   
table th{
        text-align:center;
        }
table td{
    border:1px solid #999;
    text-align:center;
        }
.one{
    background:#9FC;
    }
.two{
    background:#FC6;
    }
</style>
<script type="text/javascript" language="javascript">
function gehang(){
    //獲取tr節點
    var tr=document.getElementsByTagName("tr");
    //為第一行添加背景顏色
       tr[0].style.background="#00FF66";
       //為最後一行添加背景顏色
       tr[tr.length-1].style.background="#00FF66";
                }
    //創建全選反選函數
    function xuan(type){
        //獲取name值
        var qcheck=document.getElementsByName("check[]");
        //獲取選的按鈕
        if(type=="qx"){
            for(var i=0;i<=qcheck.length;i++){
                qcheck[i].checked=true;
                                             }
                      }
            if(type=="fx"){
            for(var i=0;i<=qcheck.length;i++){
                qcheck[i].checked=false;
                                              }
                          }
           
            if(type=="qxx"){
            for(var i=0;i<=qcheck.length;i++){
                 if(qcheck[i].checked){
           qcheck[i].checked=false;
                                     }
                                  else{
           qcheck[i].checked=true;
        
            }
                }
            }
        }
        function del(){
            var input=document.getElementsByName("check[]");
            for(var i=input.length-1; i>=0;i–){
                   if(input[i].checked==true){
                       //獲取td節點
                       var td=input[i].parentNode;
                      //獲取tr節點
                      var tr=td.parentNode;
                      //獲取table
                      var table=tr.parentNode;
                      //移除子節點
                      table.removeChild(tr);
                 }
               
                }
       
            }
</script>
</head>
<body onload="gehang()">
<table width="400" border="0" align="center">
  <tr>
    <th><input type="checkbox">全選</th>
    <th>發件人</th>
    <th>郵件名稱</th>
    <th>郵件附屬信息</th>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三11</td>
    <td>我是郵件11</td>
    <td>我是附屬信息11</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三12</td>
    <td>我是郵件12</td>
    <td>我是附屬信息12</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]" /></td>
    <td>張三13</td>
    <td>我是郵件13</td>
    <td>我是附屬信息13</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三14</td>
    <td>我是郵件14</td>
    <td>我是附屬信息14</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三15</td>
    <td>我是郵件15</td>
    <td>我是附屬信息15</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三16</td>
    <td>我是郵件16</td>
    <td>我是附屬信息16</td>
  </tr>
  <tr class="one">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三17</td>
    <td>我是郵件17</td>
    <td>我是附屬信息17</td>
  </tr>
  <tr class="two">
    <td><input type="checkbox" name="check[]"></td>
    <td>張三18</td>
    <td>我是郵件18</td>
    <td>我是附屬信息18</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="check[]"></td>
    <td>張三19</td>
    <td>我是郵件19</td>
    <td>我是附屬信息19</td>
  </tr>
  <tr>
  <th><input type="checkbox">全選</th>
  <td colspan="3" align="center">
  <input type="button" id="qx" onclick="xuan('qx')" value="全選">
  <input type="button" id="qxx" onclick="xuan('qxx')" value="取消全選">
  <input type="button" id="fx" onclick="xuan('fx')" value="反選">
  <input type="button" id="del" onclick="del()" value="刪除所選附件">
  </td>
  </tr>
</table>

</body>
</html>

摘自 席偉娜的專欄

發佈留言