Qualtrics单选题文本框显隐异常：前缀后缀提前显示求助

我是编程和Qualtrics新手，正在赶时间自学HTML基础。我有一个带三个选项的单选题，每个选项对应一个文本框，要求只有选中选项时文本框才显示（显隐功能）。需要给文本框添加不同的前缀后缀，比如“$”“annually”等，但现在出现未选选项时前缀后缀已显示，文本框却要选中才出现的问题。移动端适配已经解决，只剩这个显隐问题没搞定，附上当前代码，求技术帮助。

问题现象 #

• 未选择任何选项：所有文本框的前缀后缀（如$、hourly、annually、%）都已显示，但对应的文本框处于隐藏状态
• 选中选项后：对应选项的文本框显示，前缀后缀与文本框正常搭配显示
• 选中另一选项：原选中选项的文本框隐藏，新选中选项的文本框显示，前缀后缀跟随切换

当前代码 #

JavaScript 代码 #

Qualtrics.SurveyEngine.addOnload(function()
{   
    
var textInputs = jQuery("#"+this.questionId+" .InputText").css("float","none");
    textInputs.eq(0).before("$ ").after(" hourly");
    textInputs.eq(1).before("$ ").after(" annually");
    textInputs.eq(2).after(" %");
    
var QID= this.questionId;
     jQuery("#"+this.questionId+" input[type='text']").attr('type', 'tel');
    jQuery("#" + QID + " .InputText ").hide();
      jQuery("#" + QID + " input[type='radio']").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='radio']").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='radio']").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.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
});

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

CSS 代码 #

@media (max-width: 480px){ #QID23 .InputText { width: 20% !important; } }

问题根源在于你直接把前缀后缀插入DOM，只隐藏了文本框本身，但前缀后缀作为独立元素仍会显示。要解决这个问题，需要把文本框和对应的前缀后缀放在同一个容器里，统一控制显隐。

修改后的JavaScript代码如下，核心改动：

1. 给每个文本框及其前后缀包裹容器，同步控制显隐
2. 移除原代码中重复绑定事件的冗余代码
3. 初始化时默认隐藏所有包含文本框和前后缀的容器

Qualtrics.SurveyEngine.addOnload(function()
{   
    var QID = this.questionId;
    var textInputs = jQuery("#"+QID+" .InputText").css("float","none");

    // 为每个文本框包裹容器，并将前缀后缀添加到容器内
    textInputs.each(function(index) {
        var $container = jQuery("<span class='text-input-container'></span>");
        jQuery(this).wrap($container);
        var $parent = jQuery(this).parent();
        
        switch(index) {
            case 0:
                $parent.prepend("$ ").append(" hourly");
                break;
            case 1:
                $parent.prepend("$ ").append(" annually");
                break;
            case 2:
                $parent.append(" %");
                break;
        }
    });

    // 将文本框类型改为tel
    jQuery("#"+QID+" input[type='text']").attr('type', 'tel');

    // 初始化：隐藏所有文本框容器，仅显示选中选项对应的容器
    jQuery("#" + QID + " input[type='radio']").each(function(){
        var $textContainer = jQuery("[id*='"+jQuery(this).attr("id")+"~TEXT']").parent();
        if(jQuery(this).prop("checked")) {
            $textContainer.show();
        } else {
            jQuery("[id*='"+jQuery(this).attr("id")+"~TEXT']").val('');
            $textContainer.hide();
        }     
    });

    // 绑定单选框切换事件，同步控制容器显隐
    jQuery("#" + QID + " .Selection ").on("click change",function(){
        jQuery("#" + QID + " input[type='radio']").each(function(){
            var $textContainer = jQuery("[id*='"+jQuery(this).attr("id")+"~TEXT']").parent();
            if(jQuery(this).prop("checked")) {
                $textContainer.show();
            } else {
                jQuery("[id*='"+jQuery(this).attr("id")+"~TEXT']").val('');
                $textContainer.hide();
            }     
        });
    });
});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*页面完全显示时执行的代码*/
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*页面卸载时执行的代码*/
});

代码说明 #

• 用<span class='text-input-container'></span>包裹每个文本框和对应的前缀后缀，通过控制容器的显隐实现文本框与前后缀的同步显示/隐藏
• 初始化时遍历所有单选框，对应隐藏/显示容器
• 移除了原代码中重复绑定事件的冗余逻辑
• 保留原移动端CSS适配代码不变

内容的提问来源于stack exchange，提问作者jacoblw