js 单选按钮/多选按钮 选中

html

	

	     

		 头皮针
	   
	

	     

		静脉留置针
	   
	

		

		中心静脉置换
	   
	

		

		picc
	   
	

		

		静脉输液港
	 	


css
.import_option li div{
	width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(../image/no-choice.png) no-repeat;
	background-size: cover;
}
//提前写好被选中的样式
.y_radio{
	background: url(../image/shuxue_duihao.png) no-repeat !important;
	background-size: cover !important;
}


js
$(".import_option>li>div,.import_option>li>span").on("click",function(){
		if($(this).parent().children().eq(0).attr('class') == 'no_radio'){
			$(this).parent().children().eq(0).addClass('y_radio').parent().siblings().children().removeClass('y_radio');
		}
	})

eg:2、单选前端img引入图片

html

	

	     
		 头皮针
    
	

		
		静脉留置针
    
	

		
		中心静脉置换
    
	

		
		 picc
    
	

		
		静脉输液港
  	



css
//设置下img样式，其他的根据自己需求
.import_option li img{
	width: 16px;
    height: 16px;
    margin-right: 5px;
}

js
$(".import_option>li>img,.import_option>li>span").on("click",function(){
			$(this).parent().children().eq(0).addClass('add').parent().siblings().children().removeClass();
		if($(this).parent().children().eq(0).attr('class') == 'add'){
			$(this).parent().children().eq(0).attr('src','../image/shuxue_duihao.png').parent().siblings().children().attr('src','../image/no-choice.png');
		}
	})

3、多选按钮

html

		
								
			

			
地塞米松(毫克)
			
		
	
		

			

			
葡萄糖酸钙(毫克)
		
		
		

			

			
苯海拉明(毫克)
		
		
		

			

			
其他
		
	
	
css
.checked{
	background: url(../image/shuxue_duoxuan.png) no-repeat;
	background-size: cover;
}
.no-checked{
	background: url(../image/no-choice.png) no-repeat;
	background-size: cover;
}

js
$(".ul_list>li>p").on("click",function(){
		if($(this).parent().children().eq(0).attr('class') == 'checked'){
			$(this).parent().children().eq(0).attr('class','no-checked');
		}else if($(this).parent().children().eq(0).attr('class') == 'no-checked'){
			$(this).parent().children().eq(0).attr('class','checked');
		}
	})

如果有不对的地方，请多多指教。欢迎留言！！！！