Display relevant contents if radio button is clicked using knockout.js I have four radio buttons and I want to display relevant contents for each of them if they are clicked. I am using knockout.js for data binding. 

Is there a better way to write the if statement block?



&lt;li class="row"&gt;
  &lt;div class="col-3"&gt;
    &lt;label&gt;
      &lt;input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Standard" /&gt;Standard (Letter)&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-2" data-bind="visible:print_size_standard"&gt;
    &lt;label&gt;No. of Copies
      &lt;input type="text" data-bind="value:print_size_standard_q, valueUpdate:'keyup'" /&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/li&gt;
&lt;li class="row"&gt;
  &lt;div class="col-3"&gt;
    &lt;label&gt;
      &lt;input type="radio" data-bind="checked: print_size_radio" name="print-size" value="13 x 19" /&gt;13" x 19"&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-2" data-bind="visible:print_size_13_19"&gt;
    &lt;label&gt;No. of Copies
      &lt;input type="text" data-bind="value:print_size_13_19_q, valueUpdate:'keyup'" /&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;li class="row"&gt;
  &lt;div class="col-3"&gt;
    &lt;label&gt;
      &lt;input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Contact Sheet"&gt;Contact Sheet&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-2" data-bind="visible:print_size_contact"&gt;
    &lt;label&gt;No. of Images/Page
      &lt;input type="text" data-bind="value:print_size_contact_q, valueUpdate:'keyup'" /&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/li&gt;
&lt;li class="row"&gt;
  &lt;div class="col-3"&gt;
    &lt;label&gt;
      &lt;input type="radio" data-bind="checked: print_size_radio" name="print-size" value="Custom Size" /&gt;Custom Size&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="col-9" data-bind="visible:print_size_custom"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-2"&gt;
        &lt;label&gt;Width
          &lt;input type="text" data-bind="value:print_size_custom_w, valueUpdate:'keyup'" /&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-2 col-offset-1"&gt;
        &lt;label&gt;Height
          &lt;input type="text" data-bind="value:print_size_custom_h, valueUpdate:'keyup'" /&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-2 col-offset-1"&gt;
        &lt;label&gt;Pixels/Inches
          &lt;select data-bind="options: print_size_custom_units, value: print_size_custom_sel"&gt;&lt;/select&gt;
        &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="col-2 col-offset-1"&gt;
        &lt;label&gt;No. of Copies
          &lt;input type="text" data-bind="value:print_size_custom_q, valueUpdate:'keyup'" /&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/li&gt;




self.print_size_radio.subscribe(function(p) {
  if (p == 'Standard') {
    self.print_size_standard(true);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(false);
  } else if (p == '13 x 19') {
    self.print_size_standard(false);
    self.print_size_13_19(true);
    self.print_size_contact(false);
    self.print_size_custom(false);
  } else if (p == 'Contact Sheet') {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(true);
    self.print_size_custom(false);
  } else if (p == 'Custom Size') {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(true);
  } else {
    self.print_size_standard(false);
    self.print_size_13_19(false);
    self.print_size_contact(false);
    self.print_size_custom(false);
  }
});
Not sure how much better it is, but some would say it could look nicer to intialize everything to false, then only change when true.  Like so:

self.print_size_radio.subscribe(function(p) {

   self.print_size_standard(false);
   self.print_size_13_19(false);
   self.print_size_contact(false);
   self.print_size_custom(false);

   if (p == 'Standard') {
      self.print_size_standard(true);
   } 
   else if (p == '13 x 19') {
      self.print_size_13_19(true);
   } 
   else if (p == 'Contact Sheet') {
      self.print_size_contact(true);
   } 
   else if (p == 'Custom Size') {
      self.print_size_custom(true);
   }
});