首頁 > 其他

js 實現複選框全選和反選 方法大全

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

方法一：

//全選 

function chooseAll()
    {
     var selects = document.getElementsByName('ids');
     for(var j=0;j<selects.length;j++)
     {
      selects[j].checked=true;
     }
    }

//反選
   function fanselect()
    {
     var selects = document.getElementsByName('ids');
     for(var j=0;j<selects.length;j++)
     {
       
      if(selects[j].checked==true)
      {
       selects[j].checked=false;
      }else
      {
       selects[j].checked=true;
      }
     }
    } 

 

===========================================================================

方法二：

<html>
<title></title>
<head>
<script language="javaScript">    
  
//全選或全部不選    
function checkall() {    
    var isChecked=(document.form1.checkAll.checked == true);    
    var elements_all=document.form1.elements;    
    for(i=0;i<elements_all.length;i++) {    
        var element=elements_all[i];    
        if(element.type=="checkbox")  {    
            element.checked=isChecked;    
        }    
    }    
}    
  
//是否有checkbox被選中    
function anyChecked() {    
    var elements_any=document.form1.elements;    
    for(i=0;i<elements_any.length;i++) {    
        var element=elements_any[i];    
        if(element.checked == true) {    
            return true;    
        }    
    }    
    return false;    
}    
  
</script> 

</head>
<body>
<form name="form1" Method="post" action="" onsubmit="return anyChecked()">    
全選:<input type="checkbox" id="checkAll"onclick="checkall()" />    
多項選擇框列表:    
<input type="checkbox" name="cb" value="1"/>    
<input type="checkbox" name="cb" value="2"/>    
<input type="checkbox" name="cb" value="3"/>    
<input name="Submit" type="submit" value="submit">    
</form>  

</body>
</html>

 

======================================================================

方法三：

<html>      
<head>      
     
<SCRIPT LANGUAGE="JavaScript">      
function checkAll(e,itemName){    //全選函數 e為全選對象,itemName 為子name      
 var aa=document.getElementsByName(itemName);      
 for(var i=0;i<aa.length;i++){      
  aa[i].checked=e.checked;      
 }      
}      
     
function checkItem(e,allName){   //當選取或取消選取沒一個複選框時調用的函數       
 var all=document.getElementById(allName); //全選框對象      
 if(!e.checked){      //如果是取消選取那麼全選框就取消選取      
  all.checked=false;      
 }      
 else{                 //如果是選取，就要判斷其他是否都已經全部選取了      
  var aa=document.getElementsByName(e.name);      
  for(var i=0;i<aa.length;i++){      
   if(!aa[i].checked){//如果有一個沒有選上，那麼就返回      
    return;      
   }      
  }      
  all.checked=true;//如果其他都選上了，全選框就要選上      
 }      
}      
</script>      
<head>      
<body>      
 <div id='container'>      
      <table border=1 id='table1'>      
        <tr>      
            <th class='td1'><input type=checkbox id='selectAll' onclick='checkAll

(this,"cb");'><label for='selectAll'>全選</label></th>      
            <th>text</th>      
        </tr>      
              
        <tr>      
            <td class='td1'><input type=checkbox name='cb' onclick='checkItem

(this,"selectAll");'></td>      
            <td class='center'>11111</td>      
        </tr>      
     
        <tr>      
            <td class='td1'><input type=checkbox name='cb'     
            onclick='checkItem(this,"selectAll");'></td>      
            <td class='center'>22222</td>      
        </tr>      
     
        <tr>      
            <td class='td1'><input type=checkbox name='cb'     
            onclick='checkItem(this,"selectAll");'></td>      
            <td class='center'>33333</td>      
        </tr>      
     
        <tr>      
            <td class='td1'><input type=checkbox name='cb'     
            onclick='checkItem(this,"selectAll");'></td>      
            <td class='center'>44444</td>      
        </tr>      
     
      </table>      
     
    </div>      
</body>      

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More