js 设置ul li 中button(或者其他标签如img等等)的背景颜色

需求说明

0、选择是蓝色，没选中是白色

1、点击ul li中的button标签（或者是去其他的标签，都是一个意思）的时候，如果未选中状态就变成选中状态，如果是选中状态就变成未选中状态

2、有一个框里面统计的都是选中时候，标签里面的文字

3、每次点击，都会进行统计

应用的知识点

jquery、 ul li、for循环

实现的效果如下

1、点击合同纠纷，上面的输入框就会添加合同纠纷

2、当你再次点击合同纠纷，合同纠纷的背景颜色就是未选中的状态，输入框里面也不会有合同纠纷的字样

html代码

<div class="form-group">
		<div class="col-sm-10">
			请选择1-3个您擅长的类型<br>
<input type="text" class="form-control" id="youkinds" 	 placeholder="擅长类型">
			<ul id="allli" onclick="choose_kinds()">
<li><button type="button" class="btn btn-default" style="background-color: white">合同纠纷</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">借贷纠纷</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">劳动纠纷</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">刑事辩护</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">交通事故</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">房产纠纷</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">建筑工程</button></li>
<li><button type="button" class="btn btn-default" style="background-color: white">离婚纠纷</button></li>
</ul>
		</div>
	</div>

js代码

//1-3个类型
function choose_kinds(){
	 $("#allli li button").click(function(){
		 //如果背景颜色是白色的就变成把红色或者深蓝色，如果背景颜色是深蓝色的就变成白色
		 var rgb = $(this).css('background-color'); 
		 if(rgb=="rgb(255, 255, 255)"){
			 $(this).css({'background-color' : '#337ab7'});
		 }else{
			 $(this).css({'background-color' : 'white'}); 
		 }
		//如果背景颜色是白色的就变成把红色或者深蓝色，如果背景颜色是深蓝色的就变成白色
		 var str='';
		 //循环遍历，背景颜色不是白色的，都添加进来
			   var btn=$("#allli li button");//获取所有的li元素
				for (var i = 0; i < btn.length; i++) {
				var gb=btn[i].style.backgroundColor;
					if(gb=="rgb(51, 122, 183)"){
						str=str+btn[i].innerHTML+";";
						
					}
				}
				//添加元素
				$("#youkinds").val(str);
			           			              }) 
}
//1-3类型