---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

美化表单——自定义单选按钮和复选按钮

前端开发 蚂蚁 1769℃ 0评论

http://www.w3cplus.com/css/custome-design-checkbox-and-radio-width-jquery
http://jsfiddle.net/w3cplus/GvQyx/

 jQuery.fn.customInput = function(){
            $(this).each(function(i){
                if($(this).is('[type=checkbox],[type=radio]')){
                    var input = $(this);
                    //get the associated label using the input's id
                    var label = $('label[for='+input.attr('id')+']');
                    //get type,for classname suffix
                    var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
                    //wrap the input + label in a div
                    $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input,label);
                    //find all inputs in this set using the shared name attribute
                    var allInputs = $('input[name='+input.attr('name')+']');
                    //necessary for browsers that don't support the :hover pseudo class on labels
                    label.hover(function(){
                        $(this).addClass('hover');
                        if(inputType == 'checkbox' && input.is(':checked')) {
                            $(this).addClass('checkedHover');
                        }
                    },function(){
                        $(this).removeClass('hover checkedHover');
                    });
                    
                    //bind custom event, trigger it, bind click,focus,blur events
                    input.bind('updateState',function(){
                        if(input.is(':checked')){
                            if(input.is(':radio')){
                                allInputs.each(function(){
                                    $('label[for='+$(this).attr('id')+']').removeClass('checked');
                                });
                            };
                            label.addClass('checked');
                        } else {
                            label.removeClass('checked checkedHover checkedFocus');
                        }
                    })
                    .trigger('updateState')
                    .click(function(){
                        $(this).trigger('updateState');
                    })
                    .focus(function(){
                        label.addClass('focus');
                        if(inputType == 'checkbox' && input.is(':checked')) {
                            $(this).addClass('checkedFocus');
                        }
                    })
                    .blur(function(){
                        label.removeClass('focus checkedFocus');
                    });                    
                }
            });
        }
$(function(){
            $('input').customInput();
        });

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » 美化表单——自定义单选按钮和复选按钮

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情