Not able to reset selected radio buttons using javascript | XM Community
Solved

Not able to reset selected radio buttons using javascript

  • 15 June 2018
  • 5 replies
  • 467 views

Userlevel 5
Badge +13
I have a survey question 'jQuery example' that sets the radio button of another question 'Autoselected from the last question' (screenshot of the form shown below):
!

The javascript to select the radio button works fine and looks like this:

jQuery( "input[name='QR\\~QID2']:nth(0)" ).prop('checked', true); // auto-selects the 'Yes' option in the 'Autoselected from the last question' question.

However I have tried every combination I can think of when trying to deselect the radio button in the next question 'Reset previous question response' (using the click event on this question). I have tried:


jQuery( "input[name='QR\\~QID2']" ).prop('checked', false); // does not work
jQuery( "input[name='QR\\~QID2']" ).attr('checked', false); // does not work
jQuery( "input[name='QR\\~QID2']" ).checked = false; // does not work
jQuery( "input[name='QR\\~QID2']:nth(0)" ).prop('checked', false); // does not work


Is this because of the way the radio buttons are built in Qualtrics (since they do not simply use the standard input field to display the buttons; there is a label element that seems to handle the display end)?

The Qualtrics.SurveyEngine API seems out of the question since I am trying to control an element/question that is not the one I am selecting (eg. I am using the click event of the third question to reset the selection of the second question).
icon

Best answer by w.patrick.gale 16 June 2018, 03:58

View original

5 replies

Userlevel 7
Badge +27
> @"w.patrick.gale" said:
> Is this because of the way the radio buttons are built in Qualtrics (since they do not simply use the standard input field to display the buttons; there is a label element that seems to handle the display end)?

Yes, specifically it is the way they do it in JFE. The way you tried works in SE. There is a way to reset them in JFE by finding and changing the correct values in the question object (this), but it is complicated.
Userlevel 5
Badge +13
> @TomG said: but it is complicated.

I don't mind complicated so much, I would simply like to be able to make it work. Does the solution require raw javascript or is jQuery able to do the job?
Userlevel 7
Badge +27
You'll need to use both.
Userlevel 5
Badge +13
> @TomG said: You'll need to use both.

So I'm assuming it involves parsing out the labels associated with the radio buttons and changing the inline styles on the input label class from <label class='q-radio q-checked' ... AND the label wrapper inline class from <label class='SingleAnswer q-checked' ... to
<label class='q-radio' ... AND <label class='SingleAnswer' ...

I am hoping there is a better way.
Userlevel 5
Badge +13
Since the radio button groups were giving me so much trouble I switched to using a dropdown list and I was able to work with that. So to select the first item in a dropdown list using jQuery you would use something like:

jQuery( "select[name='QR\\~QID2']" ).val(1); // where val(1) is the first value in the dropdown list, val(2) would be the second, etc.

...and to reset to the empty/null value simply change the 'value' in the above line to:

jQuery( "select[name='QR\\~QID2']" ).val(0); // .val(-1) also seemed to work the same way

Leave a Reply