jQuery Menu with Images, Check Boxes and Radio Buttons

To display an image inside a Menu item, you need to put an img tag inside the menu item’s li tag.

For example:

<li>
     <img style='float: left; margin-right: 5px;' src='mail.png'/><span>Mail</span>
</li>

Displaying a checkbox inside a menu item requires two steps. The first step is to put a div tag inside the menu item’s li tag.

<li>
    <div style='float: left; margin-right: 5px;' id='checkbox'>
    </div>
    Enable Auto-Save</li>
<li>

The second step is to initialize the checkbox by selecting the ‘checkbox’ div tag and calling the jqxCheckBox constructor. The code below initializes the checkbox and displays it in ‘checked’ state.

$("#checkbox").jqxCheckBox({ checked: true });

You may also want to display a radio button inside a menu item. The steps for this are the same as for the checkbox, but instead of calling the jqxCheckBox constructor, you need to call the jqxRadioButton constructor.

$("#radiobutton").jqxRadioButton({ checked: true });

Please note that, if you want to display a checkbox or radiobutton, you need to load the jqxcheckbox.js or jqxradiobutton.js.

Blogs