The default horizontally grouped checkbox controls do not have an icon and the vertically grouped checkbox controls do not use the active state theme. This recipe shows you how to customize the checkbox and add these styles. It also shows you how to adjust the layout to handle varying screen sizes. You will create a simple Blog Subscription form in this recipe.
Copy the full code of this recipe from the code/05/custom-checkbox sources folder. This code can be launched using the URL http://localhost:8080/05/custom-checkbox/main.html.
The form is first created with the horizontal and vertical group of checkbox controls. The horizontal checkbox controls are customized by adding icons to them in the pageshow event handler via JavaScript. The change event of the checkbox controls indicate whether a checkbox checked state was changed. The change event handler is used to add and toggle the active state of the checkbox.
In
main.html, create...