Need to deselect radio button option when text entered side-by-side | XM Community
Question

Need to deselect radio button option when text entered side-by-side

  • 2 July 2021
  • 1 reply
  • 126 views

Hi all,
I'm currently facing a similar issue that walli asked about and rondev offered a brief fix for in a previous thread (https://community.qualtrics.com/XMcommunity/discussion/16508/using-a-side-by-side-question-where-one-column-is-exclusive-row-wise). However, as I've been unable to find an appropriate fix. Essentially, I have a matrix including a text-entry box and a "I don't know" radio button in the following column. I have figured out how to get the radio button, when selected, to clear the text entry (see code below), but can't for the life of me figure out how to get text entry to deselect the radio button.
What additional lines of code or event handlers would allow me to do this?
The matrix in question is pictured below. If anybody has any suggestions for how to make the radio button clear when text is entered by row, I'm all ears.
Thanks all,
JB
image.png
Current JS code:
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery('.QuestionBody').find('thead').find('.Answers')//.css('display','none')
jQuery('.QuestionBody').find('thead').find('.Headings').css('display','none')
jQuery('.QuestionBody thead').find('tr').find('.BorderColor').css('border','none')
jQuery('.ChoiceStructure tbody').find('tr').find('.BorderColor').css('border','none')
jQuery('.Choice').find('th').css('width','300px')
jQuery('.SBS1').css('width','75px')
jQuery('.SBS2').css('width','75px')

var $j= jQuery.noConflict();
$j("td.SBS2 ").click(function(){
$j(this).closest("tr").find(".InputText").prop("clear",$j(this).children("input")[0].checked);
$j(this).closest("tr").find(".InputText").prop("value","");
   var len=document.getElementsByClassName("InputText").length;
   for(var i=0;i<=len;i++)
  {
document.getElementsByClassName("InputText")[i]//.style.width="300px";
  }  
}); 
}); 


1 reply

Userlevel 4
Badge +13

The best way is to make that single select as multi select and then write the code as exclusive in between those as below; (update it accordingly)

jQuery('.InputText').each(function() {
  jQuery('input[type="checkbox"]').change(function(){
  if (jQuery(this).prop('checked')){
    jQuery('.InputText').val('');
    
  }
});
  
jQuery(this).keyup(function(){
  
    var input = jQuery(this).val();
  
    if(input!="")
    {
     
     jQuery('input[type="checkbox"]').prop('checked',false)
      
    }
});});

Leave a Reply