Question

我的页面上有两个radiobox和两个表格。根据选定的radiobox，相关的表格应该是可见的。我试图解决这个问题，我最终得到了这个代码：

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

但是这段代码有两个问题： 1-当您运行代码时，所有已检查的事件都会启动，所有表单都会上下滑动。 2-我希望form1默认可见。我没有这样做。

Answer 1

您好我修改了您的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/

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

1 个答案: