Показать div на основе нескольких переключателей

Question

Я создаю форму и хочу добавить дополнительные поля, когда отрицательный ответ выбран из группы переключателей, у меня она работает для одной кнопки, но я хочу иметь 3 переключателя и, если любой из 3, выбрать нет, я хочу, чтобы появилось поле ввода, которое дает больше подробностей.

$("input[name=SectionARadio]").change(function() {
  if ($(this).val() == "Yes") {
    $(".SectionAExpanded").hide();
  } else {
    $(".SectionAExpanded").show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label asp-for="VisitDate">Consumer Unit Satisfactory</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons" style="width:100%">
    <label class="btn btn-success">
      <input type="radio" name="SectionARadio" id="CUSatNo" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" name="SectionARadio" id="CUSatNo" value="No"> No
    </label>
  </div>
</div>
<div class="form-group">
  <label asp-for="VisitDate">Reading safe according to current version BS:7671?</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons" style="width:100%">
    <label class="btn btn-success">
      <input type="radio" name="SectionARadio" id="ReadSafeYes" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" name="SectionARadio" id="ReadSafeNo" value="No"> No
    </label>
  </div>
</div>
<div class="form-group">
  <label asp-for="VisitDate">RCD Present?</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons" style="width:100%">
    <label class="btn btn-success">
      <input type="radio" name="SectionARadio" id="RCDYes" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" name="SectionARadio" id="RCDNo" value="No"> No
    </label>
  </div>
</div>
<div class="SectionAExpanded" style="display:none">
  <div class="form-group">
    <label asp-for="CustomerName">Property Risk Reason</label>
    <input asp-for="CustomerName" class="form-control" />
    <span asp-validation-for="CustomerName" style="color: red"></span>
  </div>
</div>

Поскольку этот код в настоящее время работает, нажатие кнопки «да» на любой переключателе показывает элемент div, а нажатие кнопки «нет» скрывает элемент div, но это означает, что я могу установить 2 на «Нет», но если мой последний щелчок на «Да», то последний div с вводом исчезает. Как сделать так, чтобы он оставался видимым до тех пор, пока 1 из 3 переключателей имеет «Нет» в качестве выбранной опции

Answer 1

Первая проблема, с которой вы столкнулись, состоит в том, что все ваши рад ios имеют одинаковые name, поэтому выбор может быть сделан только в одном из них. Чтобы создать три отдельные группы, измените атрибуты так, чтобы только связанные пары «Да / Нет» совместно использовали один и тот же name.

. Оттуда вы можете использовать filter(), чтобы определить, является ли какой-либо из вариантов выбора «Нет» выберите и отобразите элемент .SeactionAExpanded, если это так. Попробуйте это:

var $radios = $(".SectionARadio").change(function() {
  $(".SectionAExpanded").toggle($radios.filter('[value="No"]:checked').length != 0);
});

.btn-group { width: 100%; }
.SectionAExpanded { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label asp-for="VisitDate">Consumer Unit Satisfactory</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-success">
      <input type="radio" class="SectionARadio" name="SectionARadio_0" id="CUSatNo" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" class="SectionARadio" name="SectionARadio_0" id="CUSatNo" value="No"> No
    </label>
  </div>
</div>
<div class="form-group">
  <label asp-for="VisitDate">Reading safe according to current version BS:7671?</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-success">
      <input type="radio" class="SectionARadio" name="SectionARadio_1" id="ReadSafeYes" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" class="SectionARadio" name="SectionARadio_1" id="ReadSafeNo" value="No"> No
    </label>
  </div>
</div>
<div class="form-group">
  <label asp-for="VisitDate">RCD Present?</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-success">
      <input type="radio" class="SectionARadio" name="SectionARadio_2" id="RCDYes" value="Yes"> Yes
    </label>
    <label class="btn btn-danger">
      <input type="radio" class="SectionARadio" name="SectionARadio_2" id="RCDNo" value="No"> No
    </label>
  </div>
</div>
<div class="SectionAExpanded">
  <div class="form-group">
    <label asp-for="CustomerName">Property Risk Reason</label>
    <input asp-for="CustomerName" class="form-control" />
    <span asp-validation-for="CustomerName" style="color: red"></span>
  </div>
</div>