Thanks for your answer, this isn't working unfortunately. I've tred the following but it's not working either: <script> $(document).on('click', 'input[type=radio]').click(function() { $("label[for='" + this.id + "']").toggleClass('active', this.checked); }); </script>

I made two edits to my answer. First I wrapped in a document ready method and second I inversed the single/double quotes inside the change event listener select string to match what RS Forms renders. See if that works. I also added a console.log event inside the change event callback. This way we can look at the browsers console log to ensure the event is firing at least.

Thanks Brian, I have tried this but it's not working correctly still. The label class doesn't change.

I am getting the following in the Console: TypeError: $(...).ready is not a function

Sounds like jQuery is conflicting with Mootools. Edited answer to reflect loading jQuery library and wrapping IIFE to prevent conflicts. This should resolve your issue.

Perfect! Thank you very much for your patience and help!

You're welcome, glad we got it working!

One last question, how can I update the class if the selection changes?

the toggleClass method should do that. The first parameter is the class to be added/removed, the second is a boolean value to determine whether the class should be removed and added. I'd change the second parameter though, check my code edit.

Thanks Brian, I've just tried that but it's still keeping the "selected" class assigned to of the labels which have previously been clicked

to confirm, you want the selected class only on the inputs with the radio selected?

yes please

console.log($(this).prop('checked')); just so we can verify the value being passed in is changing. if so, I believe we need to explicitly pass in 0 or 1 as the second parameter.

so we might need to add an if/and before we call classToggle and assign the value 0 or 1 to an temporary variable we pass in as second parameter.

This is in the HTML <script>(function($){$(document).ready(function(){$('input:radio[name="form[Ques‌​tion]"]').change(function(){console.log($(this).prop('checked'));$(this).next().t‌​oggleClass("selected",$(this).prop("checked"));});});})(jQuery);</script>

but getting "TypeError: $(...).ready is not a function" in the Console

can you confirm whether or not he jquery library is being loaded in the head section of the document?

yes jQuery is being loaded in the head.

The "selected" class is assigned to the label perfectly, just need it to be removed if the input selection changes

using the console log to determine, is the value of $(this).prop('checked') changing as you change input state

yes it is

ok, lets try this, first lets insert the below line before the toggleClass method

var isChecked = $(this).prop('checked');

then, swap out the second parameter in the toggleClass method with this:

parseInt(isChecked)

believe the value is being cast as a string, and as far as boolean is concerned, a 0 string will still return a true

therefore we need to cast as integer so the boolean qualifiers reads an actual 0, which will result in a false

Ok, so it now reads

is that correct?

this seems to not work correctly, it removes the class, but only if it's clicked on again

I

I'm confused, when you say it removes class only if it's clicked again, do you mean after the initial click which adds the class?

yes, please see trade.inapub.co.uk/hobgoblin the classes are added to the Answers

look at your browser's console, there's an error being thrown in your scripts.js file. is that something you wrote or part of a third party extension? It needs to be wrapped in IIFE as well.

Thanks for picking that up - I've just wrapped it with (function($) { })(jQuery);