Turn boring checkboxes into cool-looking switches using pswitch.
If you use bower, you can add the project to your components.
Create your checkboxes.
Initialize the switch.
To display labels on the sides of the switch for the on and off state, define two data attributes on the checkbox. The switch will be displayed without labels if you do not specify them.
You can check the current state of the checkbox using the standard jQuery method.
;// returns true or false
Blue does not fit your webpage style? To change the switch color, just pass the color code for the switch on creation to the pswitch function.
This would for example create a green switch.
To check or uncheck the checkbox programmatically, use jQuery to trigger the check or uncheck event on them.
// check a checkbox;// uncheck a checkbox;// you can also toggle the state!;
The switch also supports enabled and disabled states. You can manually set the checkbox state in the html before creating a pswitch or programmatically afterwards using these triggers.
// enable switch;// disable switch;
Still to be implemented
- When changing the data-on/off labels of a checkbox, the html labels should change accordingly
- Include options to change size