jQuery商品参数选中效果，简单记录

一个简单项目的功能，有一个商品的购买页面，需要用户自行选择参数然后提交订单，如果是radio默认的样式，说实话有点丑，而且在手机端的操作很不方便，所以决定制作成方块形状的选中效果，整个过程不难，就是简单的点击事件和class的添加和删除，以及find()遍历后代方法。鉴于博客没有什么好更新的内容，以及节约以后写代码的时间，所以决定开文章记录下来。

html代码如下：

<div class="info">
<p>
规格：
<label class="act">
    <input type="radio" name="norm" value="豪华版" />豪华版
</label> <label>
    <input type="radio" name="norm" value="尊贵版+65G" />尊贵版+65G
</label> <label>
    <input type="radio" name="norm" value="贵族版" />贵族版
</label>
</p>
</div>

css代码如下：

.info label{padding:5px 10px;border:#333 solid 1px;margin-right:3px;}
.info label input{display:none;}
.info .act{border:solid 1px #d93229;color:#d93229}

js代码如下:

$(document).ready(function () {
    $(".info label").click(function () { //当label被点击，执行点击事件
        $(".info label").removeClass("act");  //清空所有的act选中效果的class
        $(".info label input").removeAttr("checked");  //清空所有radio的选中checked 
        $(this).addClass('act');   //给被点击的label添加act类
        var $radio = $(this).find("input[type=radio]");   //遍历被点击label下的radio
        $flag = $radio.attr("checked", "checked");  //给被点击label下的radio添加选中checked
        
    })
});

最终效果如下：