Показать и скрыть различные формы, используя радиоканал

Question

У меня на моей странице два радиообъектива и две формы. , основанный на выбранных радиооблоках, должна быть видна соответствующая форма. я пытался решить эту проблему, и я закончил с этим кодом:

`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;*/ 
} 

Find моя обновленная скрипка здесь: http://jsfiddle.net/3g6c4anf/12/