一个小例子，全选复选框 

<!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>

 

posted on 2014-04-08 17:51  小苦瓜  阅读(151)  评论(0)    收藏  举报

导航