一个小例子，全选复选框

最新推荐文章于 2024-07-15 13:17:25 发布

weixin_34268579

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量238

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/xiaotian747/p/3652543.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.box {
    width: 200px;
    height: 100px;
    -webkit-transition: all 0.3s ease 0;
    background-color: #f4f4f4;
    border: solid 1px transparent;
}
.box:hover {
    border: solid 1px #ccc;
}
</style>
</head>

<body>
<div class="box">
  <input name="test" type="checkbox" value=""  />
  1
  <input name="test" type="checkbox" value="" />
  2
  <input name="test" type="checkbox" value="" />
  3
  <input name="test" type="checkbox" value="" />
  4
  <input name="test" type="checkbox" value="" />
  5</div>
<input type="button" value="all"  id="all" />
<script>
var but = document.getElementById("all");
but.addEventListener("click",change);
var isAll = false ;
function change (){
    var box = document.querySelectorAll(".box input");
    var num = getCheckedCheckboxesNum("test");
    console.log(num);
    if(num == box.length){isAll=true;}
    if(isAll){
        for (var i=0;i<box.length;i++){
        
        box[i].checked = false ;
        isAll = false ;}
        
        }else {
            for (var i=0;i<box.length;i++){
        
        box[i].checked = true ;
        isAll = true; }
            }
    
        
    
    }
    
function getCheckedCheckboxesNum(nameOfCheckBox)
{
var theNum=0;
var theCheckboxInputs=document.getElementsByName(nameOfCheckBox);
for (var i=0;i<theCheckboxInputs.length;i++)
{
if(theCheckboxInputs[i].checked) theNum++;
}
return theNum;
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/xiaotian747/p/3652543.html

weixin_34268579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个小例子，全选复选框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...
复制链接

扫一扫