【问题标题】:How to uncheck radio button programmatically如何以编程方式取消选中单选按钮
【发布时间】:2021-12-18 11:10:15
【问题描述】:

我有下面发布的单选按钮,我想知道如何使用类型脚本以编程方式取消选中它。 我尝试了以下操作,我将averageHeight 的值设置为false,但这并没有取消选中单选按钮。 请告诉我如何实现这一目标

html

<div id="idRadioButtonForAverageHeightDivision">
                <input [value]="0" [(ngModel)]="iOperationPasser.averageHeight" name="radioGroupForOperations" type="radio" clrCheckbox  (change)="toggleShowAverageHeight()"  [(checked)]="averageHeight"/>
                    <label id="operation-average-height">
                        {{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | translate }} 
                        <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
                            <clr-icon shape="help-info" class="is-solid"></clr-icon>
                        </button>
                    </label>
            </div>

【问题讨论】:

    标签: html css angular typescript radio-button


    【解决方案1】:

    无线电输入的默认行为是取消选中。

    您可以使用 bind 或 angular 来控制它的属性,只需访问属性 checked 并更改它。

    喜欢:

    <input type="radio" value="exm" #radio />
    
    
    // access the input with local variable on the template
    <button (click)="radio.checked=false">
        uncheck
    </button>
    
    

    或者 ---------------

    <input type="radio" value="exm" [checked]="term" />
    
    
    // now this is toggling the checked value, so it will check and uncheck - depend on the status
    <button (click)="toggle()">
        uncheck
    </button>
    
    
    TS FILE ----------------------
    public term: boolean = false
    
    toggle(){
      this.term = !this.term
    
    }
    

    因为你想访问 value 属性,它看起来几乎一样:

    <input type="radio" [value]="value" />
    
    
    TS FILE ----------------------
    // any change of the value will change it in the template. Since it's not a text input - ngModel is useless .
    public value: string = 'Value here'
    
    

    【讨论】:

    • 能否提供一些代码?
    • 给你...
    • 谢谢,但我需要它在类型脚本代码中,而不是 html!
    • 当然,这只是一个例子,你也可以在component.ts文件的一个变量中访问它,然后设置一个绑定
    • 刚刚添加的其他方式
    猜你喜欢
    • 2012-09-14
    • 2021-06-30
    • 2014-03-06
    • 2011-11-15
    • 2011-12-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-19
    相关资源
    最近更新 更多