How to unselect a radio button in Qualtrics using JavaScript?

Hi everyone,

I'm trying to implement a feature where users can unselect a radio button in a single select question by clicking on it again. Currently, users can only select a different option, but not unselect the selected option.

I've tried using the following code in the "Single Question JS" section of the question, but it doesn't seem to be working:

this.questionclick = function(event, element) {
if (element.type == 'radio') {
var selectedOption = this.getSelectedChoices()c0];
if (selectedOption === element.getAttribute('value')) {
this.clearChoice(element);
}
}
}.bind(this);

Is there a better way to do this, or am I missing something in my code?

Thanks in advance for your help!

Page 1 / 1

One of the easy approach is to use make question multi-select and then make all option as ‘Exclusive’

@Vinoth_Mathaiyan

The following post should be helpful

I need a code that can allow survey participants to deselect their clicked selection | XM Community (qualtrics.com)

Hope it helps!

Thanks @Shashi

We avoid using multi-select options for accessibility reasons, as it may be difficult to comprehend for some users when presented as a list of multiple choices

@Vinoth_Mathaiyan

The following post should be helpful

I need a code that can allow survey participants to deselect their clicked selection | XM Community (qualtrics.com)

Hope it helps!

Thanks @Deepak

It appears that the current implementation involves adding an extra button, but what we actually need is a single-select option that can behave like a multi-select option, allowing users to select an item and then unselect it if they select the item again

@Vinoth_Mathaiyan

The following post should be helpful

I need a code that can allow survey participants to deselect their clicked selection | XM Community (qualtrics.com)

Hope it helps!

Thanks @Deepak

@Vinoth_Mathaiyan To do it without a button do the below steps:

Make it multi-select matrix then make all columns as exclusive.

Post which you can include below CSS in look and feel: (Change the color if needed)

.Skin label.q-checkbox {
    border-radius: 50%;
    border-width: 2px;
 box-shadow: inset 0 0 0 2px #fff !important;
        animation: radio .2s forwards;
}
.Skin label.q-checkbox.q-checked, .Skin label.q-checkbox.q-checked.q-focused {
    background: #007ac0 !important;
    }

You then should be able to see it as radio and have functionality of it as well.

Hope it helps!

Hi, try adding the below to the OnReady section of the Multiple Choice question’s JavaScript:

var qid = this.questionId;
var selectedchoice = 0;

jQuery("#"+qid+" .QuestionBody").on("mousedown , touchstart", function() {

var selected = jQuery("#"+qid).find(".QuestionBody").find("(type=radio]");
var selectedid = selected.filter(":checked").attr("id");
var parts = selectedid.split("~");
selectedchoice = partst2];

});

this.questionclick = function(event, element) {

var elementclick = element.getAttribute('value');

 if (selectedchoice === elementclick) {
      this.setChoiceValue(selectedchoice, false);
      selectedchoice = 0;
    }

};

Thank you, @Tom_1842 : It works!!

Create one hidden html radio button (using same properties of existing radios of same question) and click it based on your condition using jQuery/javaScript. So it will not record any data and other radio buttons of same question will be unselected.

Hi, try adding the below to the OnReady section of the Multiple Choice question’s JavaScript:

var qid = this.questionId;
var selectedchoice = 0;

jQuery("#"+qid+" .QuestionBody").on("mousedown , touchstart", function() {

var selected = jQuery("#"+qid).find(".QuestionBody").find("(type=radio]");
var selectedid = selected.filter(":checked").attr("id");
var parts = selectedid.split("~");
selectedchoice = partst2];

});

this.questionclick = function(event, element) {

var elementclick = element.getAttribute('value');

 if (selectedchoice === elementclick) {
      this.setChoiceValue(selectedchoice, false);
      selectedchoice = 0;
    }

};

@Tom_1842 : I believe this code is Theme specific. In some theme this code is not working. Will it help if I provide the code for select and unselect

unselect
<label for="QR~QID804~1" class="q-radio" aria-hidden="true" data-runtime-class-q-checked="runtime.Choices.1.selected"></label><span class="LabelWrapper"><label for="QR~QID804~1" id="QID804-1-label" class="SingleAnswer ChoiceTextPositionLeft" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label></span>

select
<label for="QR~QID804~1" class="q-radio q-focused q-checked" aria-hidden="true" data-runtime-class-q-checked="runtime.Choices.1.selected"></label><span class="LabelWrapper"><label for="QR~QID804~1" id="QID804-1-label" class="SingleAnswer ChoiceTextPositionLeft q-focused q-checked" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label></span>

Hi @Vinoth_Mathaiyan , on my end it is working with all of the Dynamic Themes (Desktop, Glacier Mountains, Mountain Valleys, Cherry Tree, Blank) and also the Flat, Modern, and Classic Layouts. Are you using a different Theme or Layout?

No, using Dynamic Themes and flat. Let me double check

This has been an “approved” product idea for years. Maybe someday it will be built into the platform by default.

I believe this is a simpler and more robust approach. The other solution relies on the timing of two different event handlers. This also supports the back button.

Qualtrics.SurveyEngine.addOnload(function() {
	var q=jQuery(this.questionContainer), qobj=this, scid=q.find("[type=radio]:checked").attr("choiceid");
	q.find("[type=radio]").click(function() {
		var cid = this.getAttribute("choiceid");
		if(cid===scid) {
			qobj.setChoiceValue(cid, false);
			scid = 0;
		}
		else scid = cid;
	});
});

@TomG This is great, thank you!

I believe this is a simpler and more robust approach. The other solution relies on the timing of two different event handlers. This also supports the back button.

Qualtrics.SurveyEngine.addOnload(function() {
	var q=jQuery(this.questionContainer), qobj=this, scid=q.find("[type=radio]:checked").attr("choiceid");
	q.find("[type=radio]").click(function() {
		var cid = this.getAttribute("choiceid");
		if(cid===scid) {
			qobj.setChoiceValue(cid, false);
			scid = 0;
		}
		else scid = cid;
	});
});

Thank you so much @TomG It works!!

But additional question though.

Is it possible to enable radiobutton functionality using the keyboard instead of the mouse? Pressing the space bar currently does not check or uncheck the radiobuttn. Can the keyboard be utilized to perform the check and uncheck actions?

Sorry to make it more complicated

Yes, you coujld

I believe this is a simpler and more robust approach. The other solution relies on the timing of two different event handlers. This also supports the back button.

Qualtrics.SurveyEngine.addOnload(function() {
	var q=jQuery(this.questionContainer), qobj=this, scid=q.find("[type=radio]:checked").attr("choiceid");
	q.find("[type=radio]").click(function() {
		var cid = this.getAttribute("choiceid");
		if(cid===scid) {
			qobj.setChoiceValue(cid, false);
			scid = 0;
		}
		else scid = cid;
	});
});

Thank you so much @TomG It works!!

But additional question though.

Sorry to make it more complicated

Yes, you could use a keydown event on the radio buttons. Like click, you would only have to do the uncheck since Qualtrics already handles the check.

Yes, you coujld

I believe this is a simpler and more robust approach. The other solution relies on the timing of two different event handlers. This also supports the back button.

Qualtrics.SurveyEngine.addOnload(function() {
	var q=jQuery(this.questionContainer), qobj=this, scid=q.find("[type=radio]:checked").attr("choiceid");
	q.find("[type=radio]").click(function() {
		var cid = this.getAttribute("choiceid");
		if(cid===scid) {
			qobj.setChoiceValue(cid, false);
			scid = 0;
		}
		else scid = cid;
	});
});

Thank you so much @TomG It works!!

But additional question though.

Sorry to make it more complicated

Yes, you could use a keydown event on the radio buttons. Like click, you would only have to do the uncheck since Qualtrics already handles the check.

Got it @TomG

This code works! Thank you so much for your help!

Qualtrics.SurveyEngine.addOnload(function() {
var q = jQuery(this.questionContainer);
var qobj = this;
var scid = q.find("=type=radio]:checked").attr("choiceid");

// Click event listener for mouse clicks
q.find(">type=radio]").click(function() {
var cid = this.getAttribute("choiceid");

if (cid === scid) {
qobj.setChoiceValue(cid, false);
scid = 0;
} else {
scid = cid;
}
});

// Keydown event listener for keyboard input
q.find("ftype=radio]").keydown(function(event) {
// Check if the Spacebar key (keyCode 32) or Enter key (keyCode 13) is pressed
if (event.keyCode === 32 || event.keyCode === 13) {
var cid = this.getAttribute("choiceid");
// Toggle the selection state of the radio button
qobj.setChoiceValue(cid, !qobj.getSelectedChoices().includes(cid));
// Update the stored choice id based on the new selection state
scid = qobj.getSelectedChoices().includes(cid) ? cid : 0;
// Prevent the default behavior of the Spacebar or Enter key
event.preventDefault();
}
});
});

Hi,

Please try this:

this.setChoiceValue(1,false)
this.setChoiceValue(2,false)

reference:

https://api.qualtrics.com/82bd4d5c331f1-qualtrics-java-script-question-api-class

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded