Directly run the Code:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p><div data-bind="visible: wantsSpam"> Preferred flavor of spam: <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div> <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div> <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div></div> <script type="text/javascript"> var viewModel = { wantsSpam: ko.observable(true), spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button }; // ... then later ... viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked</script>
This is a piece of code on the official website. It can be seen that there are three radio whose checked attributes are bound to spamflavor. The initial value is "Almond ", in this way, the default value is "Almond" radio is selected.
At first, I thought that the valid value of checked is true or false, and then I realized that the original valid value is the value attribute of radio.