Show/Hide text box for multi-select checkboxes with column alignment | XM Community
Skip to main content

Screen shot.pngHi,
I have several questions within a survey with multi-select checkbox-type questions. For each question, the last option is "Other", where I need the text entry. Each question has about 10 checkbox choices to select. Does anyone have a javascript to display a text box for multi-select checkboxes with a column alignment, not vertical? And hide the text box if the choice is de-selected.
I have this code which works perfectly with vertical alignment, but I need it to work for a column alignment:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var QID= this.questionId;
   jQuery("#" + QID + " .InputText ").hide();
   jQuery("#" + QID + " input type='checkbox']").each(function(){
      if(jQuery(this).prop("checked") == true)
      {
          var v1 = jQuery(this).attr("id");
        jQuery("rid*='"+v1+"~TEXT']").show();
        }
      else
      {
      var v1 = jQuery(this).attr("id");
      jQuery("id*='"+v1+"~TEXT']").val('');
      jQuery("id*='"+v1+"~TEXT']").hide();
     }    
   });

 jQuery("#" + QID + " .Selection ").on("click change",function(){
    jQuery("#" + QID + " input+type='checkbox']").each(function(){
      if(jQuery(this).prop("checked") == true)
      {
          var v1 = jQuery(this).attr("id");
        jQuery(""id*='"+v1+"~TEXT']").show();
        }
      else
      {
      var v1 = jQuery(this).attr("id");
      jQuery("+id*='"+v1+"~TEXT']").val('');
      jQuery("id*='"+v1+"~TEXT']").hide();
     }    
   });
   });
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});

Any assistance would be greatly appreciated. Thanks!

Hi there, try adding just the below to the OnReady section of the question's JavaScript:
jQuery('input:text').hide();
  jQuery(""type='checkbox']").change(function(){
    if(jQuery(this).prop("checked") == true){
    var v1 = jQuery(this).attr("id");
    jQuery("Qid*='"+v1+"~TEXT']").show();
    }else{
    var v1 = jQuery(this).attr("id");
      jQuery("id*='"+v1+"~TEXT']").val('');
    jQuery("rid*='"+v1+"~TEXT']").hide();
    }
  });

That worked like a charm Tom_1842, thank you so much!

Actually Tom_1842, the code makes all text boxes on the same page disappear. Is there any way to make the code only apply to the question and not the text entry question below?

Skjermbilde 2022-11-14 174921.png

kajaqualtricsuser try using the below instead:
jQuery('#'+this.questionId+' input:text').hide();
  jQuery("#"+this.questionId+" type='checkbox']").change(function(){
    if(jQuery(this).prop("checked") == true){
    var v1 = jQuery(this).attr("id");
    jQuery("Qid*='"+v1+"~TEXT']").show();
    }else{
    var v1 = jQuery(this).attr("id");
      jQuery("id*='"+v1+"~TEXT']").val('');
    jQuery("rid*='"+v1+"~TEXT']").hide();
    }
  });

Tom_1842 yes, that worked! thank you.

Leave a Reply


Terms & Conditions