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).
Solved
Not able to reset selected radio buttons using javascript
+13I 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).
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).Best answer by w.patrick.gale
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
View original
+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.
+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?
+27You'll need to use both.
+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.
+13Since 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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.