jQuery Switchbutton

Checked by default

Unchecked by default

Disabled by default

With a label

With some actions


Uncheck - Check - Disable - Enable

With custom labels and callbacks

With custom options


With « thin » class and labels set to false


With « ios5 » class

Show code

  1. $(function(){
  2.  
  3. 	/* Simple ones */
  4.  
  5. 	$(".common:checkbox").switchbutton();
  6.  
  7.  
  8.  
  9. 	/* Switch 5: with check/enable actions */
  10.  
  11. 	$("#switch5").switchbutton();
  12.  
  13. 	$("#uncheck5").click(function(){
  14. 		$("#switch5").prop("checked", false).change();
  15. 	});
  16.  
  17. 	$("#check5").click(function(){
  18. 		$("#switch5").prop("checked", true).change();
  19. 	});
  20.  
  21. 	$("#disable5").click(function(){
  22. 		$("#switch5").switchbutton("disable");
  23. 	});
  24.  
  25. 	$("#enable5").click(function(){
  26. 		$("#switch5").switchbutton("enable");
  27. 	});
  28.  
  29.  
  30. 	/* Switch 6: with custom labels and callbacks */
  31.  
  32. 	$("#switch6")
  33. 		.switchbutton({
  34. 			checkedLabel: 'YES',
  35. 			uncheckedLabel: 'NO'
  36. 		})
  37. 		.change(function(){
  38. 			alert("Switch 6 changed to " + ($(this).prop("checked") ? "checked" : "unchecked"));
  39. 		});
  40.  
  41. 	/* Switch 7: with custom options */
  42.  
  43. 	$("#switch7").switchbutton({
  44. 		classes: 'ui-switchbutton-thin',
  45. 		labels: false
  46. 	});
  47. });