checkbox全选javascript代码实现

最新推荐文章于 2024-10-15 09:57:04 发布

nono365

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量635

点赞数

分类专栏： javascript 文章标签： javascript input function table

本文链接：https://blog.csdn.net/nono365/article/details/4095809

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方法一：

<table >
    <tr>
            <td width="5%"><input type="checkbox" name="boxs" value="" οnclick='SelectAll("box",this.checked)'></td>
            <td width="20%">栏目一</td>
            <td width="20%">栏目二</td>
            <td width="20%">栏目三</td>
    </tr>
    <tr>
           <td width="5%"><input type="checkbox" name="box" >1</td>
            <td width="20%">1111</td>
            <td width="20%">2222</td>
            <td width="20%">3333</td>
    </tr>
    <tr>
           <td width="5%"><input type="checkbox" name="box" >2</td>
            <td width="20%">1111</td>
            <td width="20%">2222</td>
            <td width="20%">3333</td>
    </tr>
</table>

<script type="text/javascript">
//checkbox 是否全选
function SelectAll(name,bool){
      var boxs = document.getElementsByTagName('input');
      var len = boxs.length;
      for(var i=0;i<len;i++){
          if((boxs[i].type=="checkbox")&&(boxs[i].name==name)){
              if(bool==true)
                  boxs[i].checked = true;
              else
                  boxs[i].checked = false;
          }
      }

}
</script>

方法二：

function SelectAll(name,bool){
      var boxs = document.getElementsByName(name);
      var len = boxs.length;
      for(var i=0;i<len;i++){
         if(bool==true)
            boxs[i].checked = true;
         else
            boxs[i].checked = false;
      }
}

</script>