CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcbootstrap-4
ThatMightyBean
ThatMightyBean

Reputation: 51

Show div based on multiple radio buttons

I am creating a form and want to add additional fields when a negative answer is selected from a group of radio buttons, I have it working for a single button but I want to have 3 radio buttons and if any of the 3 select no I want there to be an input field that appears to give more details. 

$("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>

As this code currently works clicking yes on any radio button shows the div and clicking no hides the div but this means I can set 2 to 'No' but if my final click is on a 'Yes' the final div with the input disappears. How can I make it so that it will stay visible as long as 1 of the 3 radio buttons have a 'No' as the selected option

Upvotes: 3

Views: 559

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The first issue you have is that all your radios have the same name, therefore a selection can only ever be made in one of them. To create three separate groups, change the attributes so that only the related Yes/No pairs share the same name.

From there you can use filter() to determine if any of the 'No' selections is chosen and display the .SeactionAExpanded element if so. Try this:

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>

Upvotes: 2

Related Questions