js 单选按钮/多选按钮 选中
eg:1、单选前端DIV引入图片
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');
}
})
如果有不对的地方,请多多指教。欢迎留言!!!!