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

html
<ul class="import_option">
	<li>
	     <div class="no_radio y_radio"></div>
		 <span class="opt-text">头皮针</span>
	   </li>
	<li>
	     <div class="no_radio"></div>
		<span class="opt-text">静脉留置针</span>
	   </li>
	<li>
		<div class="no_radio"></div>
		<span class="opt-text">中心静脉置换</span>
	   </li>
	<li>
		<div class="no_radio"></div>
		<span class="opt-text">picc</span>
	   </li>
	<li>
		<div class="no_radio"></div>
		<span class="opt-text">静脉输液港</span>
	 	</li>
</ul>

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
<ul class="import_option">
	<li>
	     <img src="../image/shuxue_duihao.png"/>
		 <span class="opt-text">头皮针</span>
    </li>
	<li>
		<img src="../image/no-choice.png"/>
		<span class="opt-text">静脉留置针</span>
    </li>
	<li>
		<img src="../image/no-choice.png"/>
		<span class="opt-text">中心静脉置换</span>
    </li>
	<li>
		<img src="../image/no-choice.png"/>
		 <span class="opt-text">picc</span>
    </li>
	<li>
		<img src="../image/no-choice.png"/>
		<span class="opt-text">静脉输液港</span>
  	</li>
</ul>


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
<ul class="ul_list">
		<li>								
			<p class="checked"></p>
			<p>地塞米松(毫克)</p>
			
		</li>
	
		<li>
			<p class="no-checked"></p>
			<p>葡萄糖酸钙(毫克)</p>
		</li>
		
		<li>
			<p class="no-checked"></p>
			<p>苯海拉明(毫克)</p>
		</li>
		
		<li>
			<p class="no-checked"></p>
			<p>其他</p>
		</li>
	</ul>
	
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');
		}
	})

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