删除选项更改时选中的单选按钮

Question

我有一个不允许创建“条件”的表格。第一个单选输入选择“是”或“否”，然后可以选择“其他”并出现一个自由文本字段。如果您在单击“其他”后改变了主意，则单击“其他”选项仍会保持选中的“其他”状态。基本上，如果初始选项发生更改，我希望删除选中的项。我会留下代码，谢谢。

$("input[type='radio']").on("change", function() {
  if ($('#documentazione_Sì').is(':checked')) {
    $("#documentazione_ok").show();
    $("#documentazione_ok").prop('required', true);
  } else {
    $("#documentazione_ok").hide();
    $("#documentazione_ok").prop('required', false);
  }

  if ($('#documentazione_No').is(':checked')) {
    $("#documentazione_nono").show();
    $("#documentazione_nono").prop('required', true);
  } else {
    $("#documentazione_nono").hide();
    $("#documentazione_nono").prop('required', false);
  }

  if ($('#documentazione_nono_altro, #documentazione_ok_altro').is(':checked')) {
    $("#altro-manuali").show();
    $("#altro-manuali").prop('required', true);
  } else {
    $("#altro-manuali").hide();
    $("#altro-manuali").prop('required', false);
    $("#altro-manuali").prop('checked', false);
  }

  if ($('#documentazione_Sì #documentazione_ok_altro, #documentazione_No #documentazione_nono_altro').is(':checked')) {
    $("#documentazione_nono_altro").prop('checked', false);
    $("#documentazione_ok_altro").prop('checked', false);
  } else {}
});

#documentazione_ok {
  display: none;
}

#documentazione_nono {
  display: none;
}

#altro-manuali {
  display: none;
}

<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-8" data-element="" class="uk-margin">
  <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="documentazione" class="uk-radio" 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="documentazione" class="uk-radio" 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>

Answer 1

我简化了脚本。

单击 Sí 或 No 时清除所有弧度，然后切换相关 div

const $rads = $("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) {
    $rads.each(function() { // uncheck all rads
      this.checked = false;
    });
    this.checked = true; // check the clicked rad
  }
  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);
  // showAltro could also be set using the altro checked prop
  $("#altro-manuali").toggle(showAltro);
  $("#altro-manuali").prop('required', showAltro);
});

#documentazione_ok {
  display: none;
}

#documentazione_nono {
  display: none;
}

#altro-manuali {
  display: none;
}

<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-8" data-element="" class="uk-margin">
  <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="documentazione" class="uk-radio" 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="documentazione" class="uk-radio" 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>

Answer 2

const $rads = $("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) {
    $rads.each(function() { // uncheck all rads
      this.checked = false;
    });
    this.checked = true; // check the clicked rad
  }
  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);
  // showAltro could also be set using the altro checked prop
  $("#altro-manuali").toggle(showAltro);
  $("#altro-manuali").prop('required', showAltro);
});

#documentazione_ok {
  display:none;
}

#documentazione_nono {
  display:none;
}

#altro-manuali {
  display:none;
}

<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>