RSForms Pro changing the class of Radio Group label

Question

I am setting up an RSForm! Pro form using Radio buttons, but I want to hide the radio buttons input and use the label for the selection, the HTML for the question is:

<div class="rsform-block rsform-block-question">
    <div class="formControlLabel">This is the question...?</div>
    <div class="formControls">
        <div class="formBody">
            <p class="rsformVerticalClear">
                <input type="radio" id="Question0" value="First Answer" name="form[Question]">
                <label for="Question0">First Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question1" value="Second Answer" name="form[Question]">
                <label for="Question1">Second Answer</label>
            </p>

            <p class="rsformVerticalClear">
                <input type="radio" id="Question2" value="Third Answer" name="form[Question]">
                <label for="Question2">Third Answer</label>
            </p>
        </div>
    </div>
</div>

Is there anyway I can do this with jQuery?

Through CSS, I want to change the background of the selected label (when clicked on), the input radio button changes, but I can't work out how to change the label to active/focus.

I think the following should work, but it doesn't seem to, as the label doesn't have a class associated with it.

$("input:radio[name='form[Question]']").change(function(){
    $("label").removeClass("selected");
    $("label[for='" + this.id + "']").toggleClass("selected", this.checked);
});

Any ideas please?

Answer 1

First, be sure the jQuery library is being loaded. Using the browser developer tools inspect the rendered head and verify it is being loaded. If not, you will need to load either from your template, or by doing a template override for the component view handling the page rendering in question. Either way, you'll need to add the following to the top.

JHtml::_('jquery.framework');

I've edited the code snippet below, wrapping in an IIFE, passing in the jQuery object to the function as $. The reason we need to do this is Joomla is still using Mootools, although it is being phased out, which also uses the $ to access library methods. This conflict requires either the use of an IIFE or to use jQuery in noConflict() mode.

Referencing the clicked target in you callback function to find the label and toggle the class should solve this for you.

(function($) {
    $(document).ready(function(){
        $('input:radio[name="form[Question]"]').change(function(){
            console.log('Change event callback fired!');
            $(this).next().toggleClass("selected", $(this).prop("checked"));
        });
    });
})(jQuery);

Also changed the qualifier from this.checked to $(this).prop("checked"). A common mistake is to assume native JavaScript object properties and methods are available in jQuery objects of the same element.

I've edited the answer to reflect wrapping function inside jQuery's document ready method to ensure the DOM is fully loaded.