checkbox 全选和取消全选

最新推荐文章于 2022-06-01 15:30:28 发布

SailingAptech

最新推荐文章于 2022-06-01 15:30:28 发布

阅读量89

点赞数

分类专栏： JavaScript 文章标签： HTML

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏


<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>   
</html>

SailingAptech

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox 全选和取消全选

[code="html"] function checkAll(e,itemName){ //全选函数 e为全选对象,itemName 为子name var aa=document.getElementsByName(itemName); for(var i=0;i
复制链接

扫一扫

专栏目录