li鼠标移入移出，点击，变背景色，变checkbox选中状态

javascript

移入移出背景色改变和点击背景色改变，两者是否相互覆盖？

若移出背景色恢复，影响点击事件的背景色改变，会产生效果为：
点击时，背景色改变，并且checkbox选中
鼠标移开后，checkbox仍选中，但背景色恢复 （见第一段代码）

若移出背景色恢复，不影响点击事件的背景色改变，会产生效果为：
点击时，背景色改变，并且checkbox选中
鼠标移开后，checkbox仍选中，背景色仍为改变后的颜色
当再次点击时，checkbox变为未选中，背景色才恢复 （见第二段代码）

两种效果的代码区别主要在于：
为li设置aLi[i].onoff = 1
if(aLi[i].onoff = 1)才会执行鼠标移入移出效果
当点击时，设置aLi[i].onoff = 0，便可防止背景色受鼠标移出的影响
当再次点击时，再设置aLi[i].onoff = 1

想要实现的效果：（第一段代码）
li奇数偶数行背景颜色不同
li鼠标移入背景颜色改变
li鼠标移出背景颜色恢复
li鼠标点击背景颜色改变，checkbox选中，但是鼠标移出背景色恢复
li鼠标再次点击checkbox未选中

window.onload = function() {
    var oDiv = document.getElementById('wrap');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var aCheckbox = oUl.getElementsByTagName('input');
    //初始化，checked全未选中
    for(var i=0;i<aCheckbox.length;i++){
          aCheckbox[i].checked = false; 
    }
    //初始化，隔行颜色不同
    bgColor();

    //背景色 初始化函数
    function bgColor(){
    for(var i=0;i<aLi.length;i++){
               aLi[i].style.background = '#fff';
               for(var j=0;j<aLi.length;j+=2){
                 aLi[j].style.background = '#f7ffff';   
    }}}
    //li移入移出变色
    for(var i=0;i<aLi.length;i++){
       aLi[i].onmouseover = function(){
           //先清空，让所有li背景色初始化
           bgColor();
           //当前li变背景色
          this.style.background = '#efefef'; 
       }
    }

     //li点击变灰色，变选中状态,移出背景色复原，仍选中；再点击未选中
    for(var i=0;i<aLi.length;i++){
       aLi[i].index = i;//索引值
       aLi[i].onclick = function(){
           //判断checkbox选中状态
          if(aCheckbox[this.index].checked){
              aCheckbox[this.index].checked = false;
               //判断当前li索引值奇偶数
              if(this.index%2 == 0){//偶数
                  this.style.background = '#f7ffff';
              }else{//奇数
                 this.style.background = '#fff'; 
             }
         }else{
             aCheckbox[this.index].checked = true;
             this.style.background = '#efefef'; 
         } 
       }
  }
};

想要实现的效果：（第二段代码）
li奇数偶数行背景颜色不同
li鼠标移入背景颜色改变
li鼠标移出背景颜色恢复
li鼠标点击背景颜色改变，checkbox选中，鼠标移出背景色不恢复
li鼠标再次点击背景颜色恢复，checkbox未选中

window.onload = function() {
    var oDiv = document.getElementById('wrap');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var aCheckbox = oUl.getElementsByTagName('input');
    //初始化，checked全未选中
    for(var i=0;i<aCheckbox.length;i++){
          aCheckbox[i].checked = false; 
    }
    //初始化，隔行颜色不同
    bgColor();

    //背景色 初始化函数
    function bgColor(){
    for(var i=0;i<aLi.length;i++){
               aLi[i].onOff = 1;
               aLi[i].style.background = '#fff';
               for(var j=0;j<aLi.length;j+=2){
                 aLi[j].style.background = '#f7ffff';   
    }}}

    //li移入移出变色
    for(var i=0;i<aLi.length;i++){

       aLi[i].onmouseover = function(){
           if(this.onOff == 1){
               //当前li变背景色
              this.style.background = '#efefef';} 
      }
       aLi[i].onmouseout = function(){
           if(this.onOff == 1){
              if(this.index%2 == 0){//偶数
                  this.style.background = '#f7ffff';
              }else{//奇数
                 this.style.background = '#fff'; 
             }}
      }
   }

     //li点击变灰色，checkbox选中；再点击背景色复原，checkbox未选中
    for(var i=0;i<aLi.length;i++){
       aLi[i].index = i;//索引值
       aLi[i].onclick = function(){
           //判断checkbox选中状态
          if(aCheckbox[this.index].checked){
              aCheckbox[this.index].checked = false;
               //判断当前li索引值奇偶数
              if(this.index%2 == 0){//偶数
                  this.style.background = '#f7ffff';
              }else{//奇数
                 this.style.background = '#fff'; 
             }
         }else{
             this.onOff = 0;
             aCheckbox[this.index].checked = true;
             this.style.background = '#efefef'; 
         } 
       }
  }
};
</script>