How to unselect a radio button in Qualtrics using JavaScript? | XM Community
Solved

How to unselect a radio button in Qualtrics using JavaScript?

V
Rank
Userlevel 2
Badge +9

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()[0];
    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!

icon

Best answer by Tom_1842 15 May 2023, 18:07

View original

18 replies

Shashi
Rank
Userlevel 6
Badge +27

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

Deepak
Rank
Userlevel 7
Badge +36

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

V
Rank
Userlevel 2
Badge +9

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

V
Rank
Userlevel 2
Badge +9

@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

Deepak
Rank
Userlevel 7
Badge +36

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

Tom_1842
Rank
Userlevel 7
Badge +27

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

});

this.questionclick = function(event, element) {

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

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

};

 

V
Rank
Userlevel 2
Badge +9

Thank you, @Tom_1842 : It works!!

ArunDubey
Rank
Userlevel 7
Badge +33

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.

~ Arun Kumar Dubey
V
Rank
Userlevel 2
Badge +9

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

Tom_1842
Rank
Userlevel 7
Badge +27

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?

V
Rank
Userlevel 2
Badge +9

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 

D
Rank
Badge +5

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

TomG
Rank
Userlevel 7
Badge +27

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

 

Tom_1842
Rank
Userlevel 7
Badge +27

@TomG This is great, thank you!

V
Rank
Userlevel 2
Badge +9

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

 

 

TomG
Rank
Userlevel 7
Badge +27

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.

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

V
Rank
Userlevel 2
Badge +9

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.

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 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("[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();
    }
  });
});
 

S
Rank
Badge +5

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


Terms & Conditions