首页 > 前端代码 > js实现checkbox全选和反选示例
2017
07-28

js实现checkbox全选和反选示例

通过js实现全选全不选

html代码

<table class="table table-bordered" id="asset_form">
        <tr>
            <th ><input type="checkbox" id="SelectAll" onclick="selectAll()">全选</th>
        </tr>
    <tbody>
        <tr>
             <td class="col-lg-1"><input type="checkbox" name="box" value='1' ></td>
             <td class="col-lg-1"><input type="checkbox" name="box" value='2' ></td>
             <td class="col-lg-1"><input type="checkbox" name="box" value='3' ></td>
        </tr>
    </tbody>
</table>

js代码

<script>
function selectAll(){
 var checklist = document.getElementsByName ("box");
   if(document.getElementById("SelectAll").checked)
   {
   for(var i=0;i<checklist.length;i++)
   {
      checklist[i].checked = 1;
   }
 }else{
  for(var j=0;j<checklist.length;j++)
  {
     checklist[j].checked = 0;
  }
 }
}

</script>

通过修改如下两项,改成和自己checkbox对应的名字,即可

document.getElementById("SelectAll")
document.getElementsByName ("box");




最后编辑:
作者:tshare365
这个作者貌似有点懒,什么都没有留下。
捐 赠您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击

留下一个回复