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

Using JavaScript to pop up text boxes using both checkboxes and column formatting

  • March 17, 2021
  • 1 reply
  • 281 views

Forum|alt.badge.img

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("[id*='"+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();
   }    
 });
 });
});

1 reply

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Level 8 ●●●●●●●●
  • January 26, 2023

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+" [type='radio']").change(function(){
 
jQuery('#'+qid+' input:text').hide();
 
    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();
    }

  });
Adapted from here and here.