Question

I don’t know why when a checkbox is clicked, it double the label text associated. Could anyone help me?

// add multiple select / deselect functionality
                $("#selectall").click(function () {
                    $('.child').attr('checked', this.checked);
                    $('.ck,.chkbox,.checkAll ,input:radio').DcustomInput();
                }); 

jQuery.fn.DcustomInput = function(){
                    $(this).each(function(i){   
                        if($(this).is('[type=checkbox],[type=radio]')){
                            var input = $(this);
                            var id=input.attr('id');


                        // get the associated label using the input's id
                        var forlabel = $('label[for='+input.attr('id')+']');
                        var chklabel = forlabel.text();
                        forlabel.hide();
                        var label = $("<label  for='"+id+"' class='checker'>"+chklabel+"</label>");

                        //get type, for classname suffix 
                        var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';   
                        //  alert(label);
                        // 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

                        if(input.is(':disabled')){
                            if(inputType == 'checkbox' && input.is(':checked')){ 
                                label.addClass(' checkedDisabled '); 
                            } else{
                                label.addClass(' disabled ');   
                            }
                        }

                        // necessary for browsers that don't support the :hover pseudo class on labels
                        label.hover(
                        function(){ 
                            if(!input.is(':disabled') ){
                                $(this).addClass('hover');
                            }
                            if(inputType == 'checkbox' && input.is(':checked') && !input.is(':disabled')){ 
                                $(this).addClass('checkedHover'); 
                            } 
                        },
                        function(){ $(this).removeClass('hover checkedHover focus'); }
                    );

                        //bind custom event, trigger it, bind click,focus,blur events                   
                        input.bind('updateState', function(){   
                            if (input.is(':checked') && !input.is(':disabled')) {
                                if (input.is(':radio')) {   
                                    var allInputs = $('input[name='+input.attr('name')+']');
                                    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'); });
                    }
                });
            };
        </script>

Answer 1

ok, I’ve found the solution, just comment these 2 lines:

forlabel.hide();
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);

so that the old label is not hidden and we don’t try to duplicate the input and the old label.