How to unselect a radio button in Qualtrics using JavaScript?

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

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 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!

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.

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 = parts[2];

});

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!

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

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;
	});
});

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.

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;
	});
});

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("[type=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

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;
	});
});

Hey Tom,

Is there a way to make this work for a matrix question.

I know there’s a way to allow multiple selections and make column exclusive but that doesn’t give the desired output when exporting datafile 

Yes, I have a function, unCheckRadios, that works on any type of question with radio buttons.