移入移出背景色改变和点击背景色改变，两者是否相互覆盖？
若移出背景色恢复，影响点击事件的背景色改变，会产生效果为：
点击时，背景色改变，并且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>