jquery高亮选中状态精简代码 radio_Html教程_奇迪科技(深圳)有限公司(www.qvdv.com)
欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

Html教程

jquery高亮选中状态精简代码 radio

作者:admin来源:www.qvdv.com更新时间:2014-01-24

radio单选,在网页制作中经常会用到,通常的单选样式不好看,现在来美化一下:选中后,绿色高亮显示。

以下是HTML代码:

<ul>
<li>
<label><input type="radio" name="type" id="type" value="" onclick="show();"/>网站制作</label>
</li>
<li>
<label class="selected"><input type="radio" name="type" id="type" value="" onclick="show();"/>域名申请</label>
</li>
</ul>

以下是CSS代码:

.selected{
    padding:5px;
    background-color:#3EAF0E;
    font-size:16px;
    font-weight:bold;
    color:#FFF;
    }

以下是JS核心代码:

<script language="JavaScript" type="text/javascript">
<!--
var removeClassA = $('ul li label.selected'); 
$('ul li label').bind('click', function(){ 
removeClassA .removeClass('selected'); 
$(this).addClass('selected'); 
removeClassA = $(this); 
}); 
//-->
</script>

效果图如下:

radio单选美化

本文版权所有,转载须注明:来源 http://www.qvdv.com/qvdv-wdl-204.html