knockout.js 选中/取消选中显示/隐藏单选按钮- knockout js

brgchamk  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(202)

我有两个单选按钮,当我点击选项A时,一个特定的div必须显示,当点击选项B时,第一个div应该隐藏,第二个div应该显示。下面是代码。

<div class="form-group">
                    <input  type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="click: test">
                    <label for="test-radio-Option-A">Text Message</label>
                </div>
                <div class="form-group">
                    <input  type="radio" name="test-radio" id="test-radio-Option-B" value="false">
                    <label for="test-radio-Option-B">Text Message</label>
                </div>
<div style="display: none" data-bind="visible: showDiv">
                test Div
            </div>

以下是我尝试的脚本:(咖啡脚本)

@showPhone = ko.observable false

test: =>
    @showPhone true

如果我单击第一个单选按钮,我就可以看到div,但我不知道这是否是正确的方法,有人能指导我完成这个过程吗?

  • 谢谢-谢谢
mv1qrgav

mv1qrgav1#

您将需要以下两个绑定:

  • 选中:以启用单选按钮
  • visible:放置您要显示的div

您html将如下所示:

<div class="form-group">
                <input  type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="checked: optionA">
                <label for="test-radio-Option-A">Text Message</label>
            </div>
            <div class="form-group">
                <input  type="radio" name="test-radio" id="test-radio-Option-B" value="false" data-bind="checked: optionB">
                <label for="test-radio-Option-B">Text Message</label>
            </div>
<div data-bind="visible: optionA">
            test Div A
        </div>
<div data-bind="visible: optionB">
            test Div B
        </div>

您的viewModel将需要两个布尔可观察变量optionA和optionB,以便视图以这种方式绑定到它们

相关问题