jquery - 基于多个单选按钮显示 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>

由于此代码当前有效，单击任何单选按钮上的"is"会显示该 div，单击“否”会隐藏该 div，但这意味着我可以将 2 设置为“否”，但如果我最终单击的是"is"，则最终的 div 为输入消失。我怎样才能使它保持可见，只要 3 个单选按钮中的 1 个选择“否”选项

Answer 1

您遇到的第一个问题是您的所有 radio 具有相同的名称，因此只能在其中一个 radio 中进行选择。要创建三个单独的组，请更改属性，以便只有相关的是/否对共享相同的名称。

从那里您可以使用 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>