基于单选按钮选择隐藏和显示元素？答案

【问题标题】：Hide and show element based on radio button selection?基于单选按钮选择隐藏和显示元素？
【发布时间】：2021-07-17 10:08:08
【问题描述】：

我们如何根据单选按钮选择隐藏和显示元素？在第一个视图中，div 被隐藏，问题是当我选择 div 显示的任何单选按钮时，当我单击 no 时它永远不会再次隐藏。我想要实现的是，当我单击单选按钮值 true 时，div 将显示，当我单击单选按钮 false 时，div 应该被隐藏。

<div class="form-group col-md-6">
    <div class="d-flex mb-2">
        <div>Do you have massage certificate ?</div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
        </div>
        <div class="form-check-radio m-0">
            <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            value="false" >
            No
            <span class="form-check-sign"></span>
            </label>
        </div>
    </div>
    <div *ngIf="has_cert">
        <input type="file" class="form-control-file custom" id="cv">
    </div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

这里的问题是您将值设置为“true”和“false”作为字符串类型。因此，在 ngIf 中，字符串不为空。因此，它总是被显示出来。使用如下绑定语法：

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="form-group col-md-6">
  <div class="d-flex mb-2">
    <div>Do you have massage certificate ?</div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
    </div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="false" >
            No
            <span class="form-check-sign"></span>
            </label>
    </div>
  </div>
  <div *ngIf="has_cert">
    <input type="file" class="form-control-file custom" id="cv">
  </div>
</div>

【讨论】：

非常感谢您的解释。

【解决方案2】：

首先，您应该维护该单选按钮值的状态。使用 console.log 检查它

然后对其进行校验验证

如果什么都没发生，试试这个，然后告诉我我会尝试另一种方式。

【讨论】：

在你的单选按钮中添加这个属性 onClick={(e) => {console.log(e.target.value) console.log(e.target.checked)}} 让我知道值，您能否使用事件和状态代码更新您的查询
对不起兄弟我没有检查你正在使用的堆栈请原谅我。我正在为 react js 提供解决方案。

【解决方案3】：

<form #myForm="ngForm" (submit)="submitForm(myForm)" novalidate>
  <div class="form-group col-md-6">
    <div class="d-flex mb-2">
      <div>Do you have massage certificate ?</div>
      <div class="form-check-radio m-0">
        <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            value="yes" 
            name="option" 
            ngModel 
            >
            Yes
            <span class="form-check-sign"></span>
            </label>
      </div>
      <div class="form-check-radio m-0">
        <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            value="no" 
            name="option" 
            ngModel 
            >
            No
            <span class="form-check-sign"></span>
            </label>
      </div>
    </div>
    <div *ngIf="myForm.value.option == 'yes'">
      <input type="file" class="form-control-file custom" id="cv">
    </div>
  </div>
</form>

【讨论】：