Question

The problem is mostly summed up in the title.

I am using the custom radio/checkbox code from accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

This is the jist of their code (I modified it to allow defining different style depending on the label’s title)

$(this).each(function(i){   
        if($(this).is('[type=radio]')){
            var input = $(this);
            
            // get the associated label using the input's id
            var label = $('label[for='+input.attr('id')+']');

            
            var labelTitle = label.attr('title');

            // wrap the input + label in a div that has class "custom-radio-LabelTitle"
            $('<div class="custom-radio-' + labelTitle + '"></div>').insertBefore(input).append(input, label);
            
            
            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name='+input.attr('name')+']');
            
            
            //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'); 
            })
        }
    });

From my understanding, their code basically finds all the radio inputs and then defines a special trigger called updateState. Then they trigger it inside the input’s click function.

So every time the input radiobutton is clicked, updateState is trigger, which in turn sets a class for that radiobutton’s label. The changing of the class changes the CSS of the label.

When the label is clicked, The input that the label is for is also clicked (JQuery’s .click() function is ran).

What I did was set all my input radiobuttons to display:none. That way the user only clicks the label, and secretly they clicked a radio button.

The .click() function won’t run for the input if the input is hidden.

I assume there are two ways pass this:

1. instead of have the radio’s .click() function trigger the handlestate, have the label’s .click() function handle it instead. This may not work right though, because then the radio button may not actually be clicked (which messes up my form)

2. when the label is clicked, trigger the radio’s click function manually. However, this may cause it to be triggered twice in every browser but IE. I don’t know how to reference the label’s radio nor to stop it from triggering twice.

Answer 1

I got what I wanted with:

$("label[title='Plan']").click(function() {
    var id = $(this).attr('for')
    $("input[id='"+id+"']").trigger("click");
    $("input[id='"+id+"']").trigger("updateState");
    PlanChange();
});

Then removed all the onClicks.