js 实现复选框全选和反选 方法大全

方法一:

//全选 

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="" οnsubmit="return anyChecked()">    
全选:<input type="checkbox" id="checkAll"οnclick="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' οnclick='checkAll

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值