使用单选框显示和隐藏不同的窗体

Show and hide different forms using radio box

本文关键字：窗体 隐藏 单选框 显示      更新时间：2023-09-26

我的页面上有两个单选框和两个表单。根据所选的单选框，相关的表单应该是可见的。我试图解决这个问题，结果得到了这个代码：

    `http://jsfiddle.net/3g6c4anf/1/`

但是这个代码有两个问题：1-运行代码时，所有选中的事件都会启动，所有表单都会上下滑动。2-我希望form1在默认情况下是可见的。我没有这么做。

嗨，我修改了你的HTML如下：

<div>
     <h2>Select form</h2>
    <p>
        <label>
            <input type='radio' value="both" name="myRadio" data-bind='checked: myRadioChecked' />both</label>
        <label>
            <input type='radio' value="form1" name="myRadio" data-bind='checked: myRadioChecked' />Form1</label>
        <label>
            <input type='radio' value="form2" name="myRadio" data-bind='checked: myRadioChecked' />Form2</label>
    </p>
    <div id="form1" class="forms">
        <input type="text" value="input form1" class="form-control" />
    </div>
    <div id="form2" class="forms">
        <input type="text" value="input form2" class="form-control" />
    </div>
</div>

我修改了你的javascript如下：

var FormsModel = function () {
    this.myRadioChecked = new ko.observable();
    this.formToShow = function (e) {
        console.log(e);
        $(".forms").slideUp();
        switch (e) {
            case "form1":
                $("#form1").slideDown();
                break;
            case "form2":
                $("#form2").slideDown();
                break;
            default:
                $(".forms").slideDown();
                break;
        }
    };
    this.myRadioChecked.subscribe(this.formToShow);   
};
ko.applyBindings(new FormsModel());

我还更改了css：

.forms {
    /*display:none;*/
}

在这里找到我更新的小提琴：http://jsfiddle.net/3g6c4anf/12/

相关文章：