写了一个全选框和取消取消全选框代码，但是在手动选择全部选项后自动勾选全选框那里出了问题，为什么实现不了啊，麻烦各位大神帮我看看出了什么问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script type="text/javascript">
window.onload=function(){
var allCheck=document.getElementById("FirstCheck")
var fruitElts=document.getElementsByName("fruit")
allCheck.onclick=function(){

if(allCheck.checked){
for(var i=0;i<fruitElts.length;i++){
fruitElts[i].checked=true
}
}else{
for(var i=0;i<fruitElts.length;i++){
fruitElts[i].checked=false
}

}

}
var all=fruitElts.length//获取选项框总数
for(var i=0;i<fruitElts.length;i++){
   fruitElts[i].onclick()=function(){
   var checkedCount=0//计数器归零
   for(var j=0;j<fruitElts.length;j++){
   
   if(fruitElts[j].checked){
   checkedCount++
   }//判断选项框状态，如果被勾选则计数器加一
   
   }
 allCheck.checked=(all==checkedCount)//判断计数器总数和选项框总数是否相等，若相等则勾选全选框
   }

      
}
}
</script>

<input type="checkbox" id="FirstCheck" />全选<br />
<input type="checkbox" name="fruit" />苹果<br />
<input type="checkbox" name="fruit" />香蕉<br />
<input type="checkbox" name="fruit" />桃子


</body>
</html>