Knockout Radio Buttons

Demonstration of problem setting initial selected value for radio button with knockout.

by Dan McCoy

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div >
  <label>Egg<input type="radio" name="foodGroup" value="egg" data-bind="checked: food" /></label>
  <label>Bacon<input type="radio" name="foodGroup" value="bacon" data-bind="checked: food" /></label>
  <label>Sausage<input type="radio" name="foodGroup" value="sausage" data-bind="checked: food" /></label>
  <div>
  Chosen food: <span data-bind="text: food"/>
  </div>
</div>

JavaScript

var viewModel = function (){
	this.food = ko.observable("bacon");
}

ko.applyBindings(new viewModel());