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

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

最终效果如下:
Snap.jpg

发表评论
加载中...

相关文章