网页开发，关于radio表单的一点玩法

做表单的时候，经常会用到radio类型，用来作为选项值，但是html中默认的radio表单是比较丑的，就是个圆形小孔。而在仿站的时候，很多网站的选项都是十分漂亮，比如直接是方块形式的，点击还会出现各种效果，但是radio又无法直接改为那种形式，当时我做一个模板的时候就思考了很多，最后也想到一种比较简单的思路。那就是，设置js点击事件，点击外部的区块则选中对应radio，然后在把radio直接隐藏就行了，表单可以正常的提交过去。

需要实现的效果

单个区块的代码如下，为定义的li标签

<li class="active">
<input type="radio" name="egold" value="1000" class="radio" checked="checked" style="display:none;">
<div class="app_borderBlock">
<span class="top">
<span class="number">
<i>1000小说币</i>
</span>
</span>
<span class="bottom">10元</span>
</div>
</li>

其中class="active"为区块被点击选中后效果的定义，且只出现在第一个。

js的代码则设置为，点击区块则选中区块内radio表单，并且将li标签新增class="active"

<script type="text/javascript">
    $(document).ready(function () {
        $('.app_openReadBlock_select li').click(function () {
            $(this).parent().find('li').removeClass('active');
            var  $radio = $(this).find("input[type=radio]"),
                     $flag  = $radio.is(":checked");
            if( !$flag ){
                $radio.prop("checked",true);   
            }
            $(this).addClass('active');
        })
    })
</script>

上述js的意思就是，当指定区域的li标签内容被点击后，则删除其它li标签的class="active"，并且将被选中的li赋予class，同时选中里面的radio表单。