Radio and checkbox binding
Radio and checkbox handling in forms can be a pain. This is another area where Knockout just makes things simple. Our example will start by creating a file named radio.html
this time. Let's start with the markup for our checkbox:
<h2>Checkbox</h2> <p> Colors (<span data-bind="text: colors"></span>)<br/> <input type="checkbox" value="red" data-bind="checked: colors" /> Red<br/> <input type="checkbox" value="green" data-bind="checked: colors" /> Green<br/> <input type="checkbox" value="blue" data-bind="checked: colors" /> Blue<br/> <input type="checkbox" value="yellow" data-bind="checked: colors" /> Yellow<br/> <input type="checkbox" value="purple" data-bind="checked: colors" /> Purple<br/> </p>
Now, add this code in a script
tag on the bottom of the page, as we have done for the other pages. We will need an array to hold the contents of the selected items...