jquery.checkbox.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. jQuery.fn.checkboxToggle = function(opt){
  2. var check = jQuery(this).next()[0].checked == true;
  3. jQuery(this)
  4. .attr({ src: check ? opt.unchecked : opt.checked })
  5. .next()[0].checked = !check;
  6. }
  7. jQuery.fn.checkbox = function(opt){
  8. jQuery(":checkbox", this)
  9. // Hide each native checkbox
  10. .hide()
  11. // Iterate through checkboxes and do all the magical stuff
  12. .each(function (){
  13. jQuery("<img>")
  14. // Set image attributes
  15. .attr({src: this.checked ? opt.checked : opt.unchecked, alt: "" })
  16. //
  17. .click(function() {
  18. jQuery(this).checkboxToggle(opt);
  19. })
  20. // Attach image
  21. .insertBefore(this);
  22. });
  23. }
  24. jQuery.fn.cssCheckboxToggle = function(){
  25. jQuery(this).each(function(){
  26. var label = jQuery(this);
  27. label.toggleClass("checked");
  28. var check = jQuery(":checkbox[@name='"+label.attr("for")+"']")[0];
  29. check.checked = !check.checked;
  30. });
  31. }
  32. jQuery.fn.cssCheckboxCheck = function(){
  33. jQuery(this).each(function(){
  34. var label = jQuery(this);
  35. label.addClass("checked");
  36. var check = jQuery(":checkbox[@name='"+label.attr("for")+"']")[0];
  37. check.checked = true;
  38. });
  39. }
  40. jQuery.fn.cssCheckboxUncheck = function(){
  41. jQuery(this).each(function(){
  42. var label = jQuery(this);
  43. label.removeClass("checked");
  44. var check = jQuery(":checkbox[@name='"+label.attr("for")+"']")[0];
  45. check.checked = false;
  46. });
  47. }
  48. jQuery.fn.cssCheckbox = function(){
  49. jQuery(":checkbox", this)
  50. // Hide native checkboxes
  51. .hide()
  52. // Find related labels and add all the fancy stuff
  53. .each(function(){
  54. var check = this;
  55. var jlabel = jQuery("label[@for='"+jQuery(check).attr("name")+"']");
  56. // Initial state check
  57. if (check.checked) {
  58. jlabel.addClass("checked");
  59. }
  60. jlabel
  61. // Label hover state
  62. .hover(
  63. function() { jQuery(this).addClass("over"); },
  64. function() { jQuery(this).removeClass("over"); }
  65. )
  66. // Label click state
  67. .click(function(){
  68. jQuery(this).cssCheckboxToggle();
  69. });
  70. });
  71. }