选项变更时仅重置对应单选按钮及关联字段的实现问题

问题原因 #

原代码中点击Sì或No选项时，会遍历所有单选按钮并取消选中，导致星级评分这类无关字段也被重置。

修复后的代码 #

JavaScript #

const $documentazioneRads = $("input[name='documentazionetest'], input[name='documentazione_ok'], input[name='documentazione_nono']");
const $allRads = $("input[type='radio']").on("change", function() {
  let siClicked = this.id === 'documentazione_Sì';
  let noClicked = this.id === 'documentazione_No';
  const showAltro = this.id === 'documentazione_nono_altro' || this.id === 'documentazione_ok_altro';

  if (siClicked || noClicked) {
    // 仅重置documentazione相关的单选按钮
    $documentazioneRads.each(function() {
      this.checked = false;
    });
    this.checked = true;
    // 隐藏并清空自由文本字段
    $("#altro-manuali").hide().find('textarea').val('');
  }

  let si = $('#documentazione_Sì').is(":checked");
  let no = $('#documentazione_No').is(":checked");
  
  $("#documentazione_ok")
    .toggle(si)
    .prop('required', si);
  $('#documentazione_nono')
    .toggle(no)
    .prop('required', no);

  $("#altro-manuali").toggle(showAltro);
  $("#altro-manuali").prop('required', showAltro);
});

CSS #

#documentazione_ok {
  display:none;
}

#documentazione_nono {
  display:none;
}

#altro-manuali {
  display:none;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.19.1/css/uikit-core.min.css" integrity="sha512-61ZZY3YIjr821vHbtfOTRIGYiRSPE6nA5IVt8ndGZcXa2iRfAcuWPAdt7HyQC23AGo1+dwAd+DOPUzz64K6GsA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<h1 class="uk-h3 uk-margin-remove-top uk-margin-remove-bottom" data-id="page#1-0-1-7" data-element="">        Title    
</h1>
<div data-id="page#1-0-1-2" data-element="" class="rate2 uk-margin">
    <fieldset data-yooessentials-form-field="tempi" style="border-width: 0; margin: 0; padding: 0;"><div class="uk-form-controls">
        <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
    
    
        <label class="uk-flex uk-margin-right uk-first-column">            <div><input id="star1" type="radio" name="tempi" class="uk-radio" value="1" data-id="page#1-0-1-2-0"></div>
            <div class="uk-margin-small-left">1</div>
        </label>
    
        <label class="uk-flex uk-margin-right">            <div><input id="star2" type="radio" name="tempi" class="uk-radio" value="2" data-id="page#1-0-1-2-1"></div>
            <div class="uk-margin-small-left">2</div>
        </label>
    
        <label class="uk-flex uk-margin-right">            <div><input id="star3" type="radio" name="tempi" class="uk-radio" value="3" data-id="page#1-0-1-2-2"></div>
            <div class="uk-margin-small-left">3</div>
        </label>
    
        <label class="uk-flex uk-margin-right">            <div><input id="star4" type="radio" name="tempi" class="uk-radio" value="4" data-id="page#1-0-1-2-3"></div>
            <div class="uk-margin-small-left">4</div>
        </label>
    
        <label class="uk-flex uk-margin-right">            <div><input id="star5" type="radio" name="tempi" class="uk-radio" value="5" data-id="page#1-0-1-2-4"></div>
            <div class="uk-margin-small-left">5</div>
        </label>
    
        </div>
    
    </div><div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div></fieldset>
</div>
<div data-id="page#1-0-1-8" data-element="" class="uk-margin" id="sino">
    <fieldset data-yooessentials-form-field="documentazione" style="border-width: 0; margin: 0; padding: 0;">
        <div class="uk-form-controls">
            <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
                <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_Sì" type="radio" name="documentazionetest" class="uk-radio domanda" value="Sì" data-id="page#1-0-1-8-0"></div>
                    <div class="uk-margin-small-left">Sì            </div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_No" type="radio" name="documentazionetest" class="uk-radio domanda" value="No" data-id="page#1-0-1-8-1"></div>
                    <div class="uk-margin-small-left">No    </div>
                </label>
            </div>
        </div>
        <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
    </fieldset>
</div>
<div data-id="page#1-0-1-9" data-element="" id="documentazione_ok" class="uk-margin" style="display: none;">
    <fieldset data-yooessentials-form-field="documentazione_ok" style="border-width: 0; margin: 0; padding: 0;">
        <div class="uk-form-controls">
            <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-grid-stack" uk-grid="">
                <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_ok_Il manuale non trattava il caso specifico" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non trattava il caso specifico" data-id="page#1-0-1-9-0"></div>
                    <div class="uk-margin-small-left">1</div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_Il manuale non era chiaro" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non era chiaro" data-id="page#1-0-1-9-1"></div>
                    <div class="uk-margin-small-left">2</div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_ok_altro" type="radio" name="documentazione_ok" class="uk-radio" value="altro" data-id="page#1-0-1-9-2"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
            </div>
        </div>
        <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
    </fieldset>
</div>
<div data-id="page#1-0-1-10" data-element="" id="documentazione_nono" class="uk-margin">
    <fieldset data-yooessentials-form-field="documentazione_nono" style="border-width: 0; margin: 0; padding: 0;">
        <div class="uk-form-controls">
            <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
                <label class="uk-flex uk-margin-right uk-first-column">
                    <div><input id="documentazione_nono_Il manuale cartaceo non era presente" type="radio" name="documentazione_nono" class="uk-radio" value="Il manuale cartaceo non era presente" data-id="page#1-0-1-10-0"></div>
                    <div class="uk-margin-small-left">3</div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non ho accesso all’area riservata del sito" type="radio" name="documentazione_nono" class="uk-radio" value="Non ho accesso all’area riservata del sito" data-id="page#1-0-1-10-1"></div>
                    <div class="uk-margin-small-left">4</div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_Non sapevo dove reperirli" type="radio" name="documentazione_nono" class="uk-radio" value="Non sapevo dove reperirli" data-id="page#1-0-1-10-2"></div>
                    <div class="uk-margin-small-left">5</div>
                </label>
                <label class="uk-flex uk-margin-right">
                    <div><input id="documentazione_nono_altro" type="radio" name="documentazione_nono" class="uk-radio" value="altro" data-id="page#1-0-1-10-3"></div>
                    <div class="uk-margin-small-left">Altro</div>
                </label>
            </div>
        </div>
        <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
    </fieldset>
</div>
<div data-id="page#1-0-1-11" data-element="" id="altro-manuali" class="uk-margin" style="display: none;">
    <div data-yooessentials-form-field="altromanuali">
        <div class="uk-form-controls">
            <textarea class="uk-textarea" id="altromanuali" name="altromanuali"></textarea>
        </div>
        <div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
    </div>
</div>

关键修改点 #

• 定义$documentazioneRads变量，仅包含与Sì/No及后续选项相关的单选按钮，避免影响星级评分等其他字段。
• 切换Sì/No时，仅重置上述范围内的单选按钮，同时隐藏并清空自由文本框内容。
• 保留原有的显示/隐藏逻辑和必填项设置，确保表单交互正常。

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