一个icon的选中与不选中

页面的样式展示

1、页面中选中的状态

2、页面中未选中的状态

3、俩个icon代表的状态

页面的布局展示

                                   <label>
                                        <i class="iconfont icon-danxuan1"></i>
                                        <input hidden checked type="checkbox" class="checkedC" onclick="Radiochoose(this)"/>
                                        <span>本人保证所填单据真实有效，并同意</span>
                                        <span class="actives">《理赔须知》</span><br /><br />
                                    </label>

想法和构思

icon的选中与未选中可以用俩个不同的icon控制，为了后台好拿到值，放一个隐藏域，给input添加一个方法，判断按钮现有的样式是否是选中的，是选中的就让input的check属性为true

    function Radiochoose(_this){
            var label = $(_this).parent();     //找到input的父级label
            var icon = label.find('.iconfont');   //找到label下面的icon
            if(icon.hasClass('icon-danxuan')){    //判断是否有选中的样式
                icon.removeClass('icon-danxuan').addClass('icon-danxuan1');    //是选中状态的话，就移除选中状态的样式，添加未被选中的
            }else{
                icon.removeClass('icon-danxuan1').addClass('icon-danxuan');   //没有的话，移除现在的样式 ，添加选中状态的样式
            }
        }

或者是给input添加点击事件
 $('#checkR').click(function(){
            alert(123);
            var label = $(this).parent();
            console.log(label);
            var icon = label.find('.iconfont');
            if(icon.hasClass('icon-danxuan')){
                icon.removeClass('icon-danxuan').addClass('icon-danxuan1');
            }else{
                icon.removeClass('icon-danxuan1').addClass('icon-danxuan');
            }
         });

转载于:https://www.cnblogs.com/lml-lml/p/7879275.html