Jquery Mobile Form - Checkboxes

    Checkboxes - popularly used in forms for multi-option selection, pose a problem in the mobile web world! The checkboxes being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these checkboxes in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the checkboxes so that they are larger and clickable. A custom set of icons representing the checkboxes is added to provide additional visual feedback.

    The checkboxes can be used singularly or in a vertical group or can be even grouped horizontally. These checkboxes can be used along with data-mini="true" too, which renders the checkboxes in a smaller size. We will take a look at all this in the example that follows.

    In the first implementation you will see, 3 singular checkboxes which are not attached to each other like in the second implementation. These 2 implementations differ by the usage of the "fieldset" and the data-role="controlgroup". Adding the fieldset with data-role="controlgroup" around the input tags will group the checkboxes together giving them the right visual grouping. Using the data-mini="true" attribute with fieldset will render smaller sized checkboxes as seen in the third implementation.

    In the next implementation, we have the label and the checkboxes control group aligned next to each other. To achieve this you need to wrap your fieldset with dat-role="controlgroup" within a div with data-role="fieldcontain". All of these 4 implementation have a vertical grouping of checkboxes.

    In the next and final implementation of checkboxes we will see how to create a horizontal set of checkboxes  This again is pretty simple like all the above implementations. You need to create a fieldset with data-role="controlgroup" and another data attribute data-type="horizontal". This data-type attribute will inform JQM to render the checkboxes in a horizontal group.

    For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label. To hide labels in a way that leaves them visible to assistive technologies. — for example, when letting an element's placeholder attribute serve as a label — apply the helper class ui-hidden-accessible to the label itself. While the label will no longer be visible, it will be available to assisitive technologies such as screen readers.

    Hope this post has been informative to you and helps you use checkboxes effectively in your next Jquery Mobile based application. Drop a comment to let me know what you feel about this post as well as the earlier series on Jquery Mobile listview and Jquery Mobile form elements. Share the post if is has helped you, so that maximum developers benefit from this one.