HTML 表单中，复选框全选和反选

最新推荐文章于 2024-07-16 17:07:23 发布

hwj1107

最新推荐文章于 2024-07-16 17:07:23 发布

阅读量2.3k

点赞数

分类专栏： asp 文章标签： html function input

本文链接：https://blog.csdn.net/hwj1107/article/details/4964213

版权

asp 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在做批量删除的时候用到的是复选框的全选和反全选：

前端html 页面：
<input type="checkbox" name="chkSelectAll" id="chkSelectAll" οnclick="selectChange();"/> 全选<p/>
<input type="checkbox" name="chkItem" value="${prod.id}"/> 删除<br>
<input type="checkbox" name="chkItem" value="${prod.id}"/> 删除<br>
<input type="checkbox" name="chkItem" value="${prod.id}"/> 删除<br>

Javacript:
<script type="text/javascript">
   function selectChange(){

    var chkSelectAll = document.getElementById("chkSelectAll");
    var checked = chkSelectAll.getAttribute("checked");

    if(checked){
     //select all products
     selectAllItem();
    } else {
     //unselect all products
     unSelectAll();
    }
    //alert("you select the all items");

   }

   //选择全部商品
   function selectAllItem(){

    var items = document.getElementsByName("chkItem");
    for(var i = 0; i < items.length; i++){
     items[i].checked = true;
    }
   }

   //取消全选
   function unSelectAll(){

    var items = document.getElementsByName("chkItem");
    for(var i = 0; i < items.length; i++){
     items[i].checked = false;
    }
   }

</script>