jQuery Toggle Button

This post illustrates how to add a toggle button to a web page in a few simple steps. Use the toggle button to allow the user to select a true or false state.

1. Include the JavaScript and stylesheet files:

   <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
   <link rel="stylesheet" href="styles/jqx.darkblue.css" type="text/css" />
   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="jqxcore.js"></script>
   <script type="text/javascript" src="jqxbuttons.js"></script>

   The Toggle Button is implemented in the jqxbuttons.js. We will set the ‘darkblue’ theme to the button and we need to include jqx.darkblue.css style.

2. Add an input element with id=’jqxButton’.

   <input type="button" value="Toggled Button" id='jqxButton' />

3. Select the input element and call the jqxToggleButton constructor.

   $("#jqxButton").jqxToggleButton({ width: '200', height: '30', 
   	toggled: true, theme: 'darkblue' });

   The toggled property specifies the state of the button. When the toggle button is clicked, the toggled property value is switched to true or false.

CodeProject