Click here to Skip to main content
12,954,280 members (65,125 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 6 Jan 2012

jQuery Toggle Button

, 6 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This post illustrates how to add a toggle button to a web page in a few simple steps.

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(<span class="code-none">{ width<span class="code-none">: '200', height: '30', 
    	toggled: true, theme: 'darkblue' <span class="code-none">});</span></span></span>

    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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 6 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid