Using JavaScript to pop up text boxes using both checkboxes and column formatting | XM Community
Skip to main content

Hello! Thanks to these forums, I've found some JavaScript (below) that allows a text entry box to pop up when a checkbox is selected. Most of my questions are using the vertical position format, showing all the response options in a long vertical list. However, I have one question where I'd like to have the response options appear in columns instead of one long list. When I change the position setting to "columns," this script no longer works. I haven't had any luck searching the forums for this particular situation, with the column formatting. Any edits I need to make to the script to accommodate the column formatting?

Thank you!

Qualtrics.SurveyEngine.addOnload(function()
{
/Place your JavaScript here to run when the page loads/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
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("jid*='"+v1+"~TEXT']").val('');
    jQuery("did*='"+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();
   }    
 });
 });
});

Hi there, if you still need, the below should work for Vertical, Horizontal, and Column alignments. 
For Multiselects, add the below to the OnReady section of the Multiple Choice Question's JavaScript. 
var qid = this.questionId;

jQuery('#'+qid+' input:text').hide();

  jQuery("#"+qid+" +type='checkbox']").change(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();
    }
  
  });
For Single selects, add the below to the OnReady section of the Multiple Choice Question's JavaScript. 
var qid = this.questionId;

jQuery('#'+qid+' input:text').hide();

jQuery("#"+qid+"  
jQuery('#'+qid+' input:text').hide();
 
    if(jQuery(this).prop("checked") == true){
    var v1 = jQuery(this).attr("id");
    jQuery("hid*='"+v1+"~TEXT']").show();
    }else{
    var v1 = jQuery(this).attr("id");
      jQuery("rid*='"+v1+"~TEXT']").val('');
    jQuery("'id*='"+v1+"~TEXT']").hide();
    }

  });
Adapted from here and here.


Leave a Reply