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

---

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

若移出背景色恢复，影响点击事件的背景色改变，会产生效果为：

点击时，背景色改变，并且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>