jQuery Mobile: Icon Position Right Of Checkbox

This entry is part 17 of 73 in the series jQuery Mobile

To place the checkbox icon on the right hand side of the page, we use data-iconpos=’right’ attribute.

<fieldset data-role='controlgroup' data-iconpos='right'>
Checkbox Icon Position
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Icon Position Right Checkbox</h1></div> 
    <p>Icon Position right</p>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox_a' id='checkbox_a'>
            <label for='checkbox_a'>One</label>
            <input type='checkbox' name='checkbox_b' id='checkbox_b'>
            <label for='checkbox_b'>Two</label>
            <input type='checkbox' name='checkbox_c' id='checkbox_c'>
            <label for='checkbox_c'>Three</label>

    <div data-role='footer' data-position='fixed'>
Try The Code
Series Navigation<< jQuery Mobile: Horizontal Group Checkbox
jQuery Mobile: Theme B Checkbox >>

Leave a comment

Leave a Reply