Hello!

Few days ago I had problems with jQuery fancy checkbox plugin (http://forums.asp.net/t/1621396.aspx) and Raghav Khunger kindly helped me solved the problem.

However after that I want to "combine" 2 plugins, the one mentioned in first post:

http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

and this one ("Safari"):

http://widowmaker.kiev.ua/checkbox/

So I've changed the picture of checkbox and wanted to add hover effects as it is shown in second link (according to state of checkbox).

However since I'm quite noob with jQuery (and JS) the thing only works fine on "default" mode, when checkbox is not selected or checked on page load.

JS:

//##############################
 // jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
 // By Dharmavirsinh Jhala - dharmavir@gmail.com
 // Date of Release: 13th March 10
 // Version: 0.8
 /*
 USAGE:
 $(document).ready(function(){
 $(":radio").behaveLikeCheckbox();
 }
 */
      

 var elmHeight = "16"; // should be specified based on image size


 // Extend JQuery Functionality For Custom Radio Button Functionality
 jQuery.fn.extend({
     dgStyle: function() {
         // Initialize with initial load time control state
         $.each($(this), function() {
             var elm = $(this).children().get(0);
             elmType = $(elm).attr("type");
             $(this).data('type', elmType);
             $(this).data('checked', $(elm).attr("checked"));
             //added so disabled checkbox is not active
             $(this).data('disabled', $(elm).attr("disabled"));
             $(this).dgClear();
         });
         $(this).mousedown(function() { $(this).dgEffect(); });
         $(this).mouseup(function() { $(this).dgHandle(); });
     },
     //on page load, default
     dgClear: function() {
         if ($(this).data("checked") == true) {
             $(this).css({ backgroundPosition: "0px -16px"});
             //works strangely
             $(this).hover(function() {
                $(this).addClass('checkbox-hoverChk');
             }, function() {
                 $(this).removeClass('checkbox-hoverChk');
             });
         }
         else if (($(this).data("disabled") == true)) {
             $(this).css({ backgroundPosition: "0px -32px", color: "#808080" });
         }
         else {
             //$(this).css({ backgroundPosition: "0px 0px" });
             //works
             $(this).hover(function() {
                 $(this).addClass('checkbox-hoverUnchk');
             }, function() {
                 $(this).removeClass('checkbox-hoverUnchk');
             });
         }
     },
     //if you hold left mouse button pressed on (un)checked checkbox the icon gets darker
     dgEffect: function() {
         //added so disabled checkbox is not active
         if (!($(this).data("disabled") == true)) {
             if ($(this).data("checked") == true)
                 $(this).css({ backgroundPosition: "-16px -16px" });
             else
                 $(this).css({ backgroundPosition: "-16px 0px" });
         }
     },
     dgHandle: function() {
         //added so disabled checkbox is not active
         if (!($(this).data("disabled") == true)) {
             var elm = $(this).children().get(0);
             if ($(this).data("checked") == true)
                 $(elm).dgUncheck(this);
             else
                 $(elm).dgCheck(this);


             if ($(this).data('type') == 'radio') {
                 $.each($("input[name='" + $(elm).attr("name") + "']"), function() {
                     if (elm != this)
                         $(this).dgUncheck(-1);
                 });
             }
         }
     },
     //check
     dgCheck: function(div) {
         $(this).attr("checked", true);
         $(div).data('checked', true).css({ backgroundPosition: "0px -16px" });
     },
     //uncheck
     dgUncheck: function(div) {
         $(this).attr("checked", false);
         if (div != -1) {
             //after unchecking of the CB the default picture is shown
             $(div).data('checked', false).css({ backgroundPosition: "0px 0px" });
             //doesn't work
             if ($(div).data('checked') == false) {
                 $(div).hover(function() {
                 $(div).addClass('checkbox-hoverUnchk');
                 }, function() {
                 $(div).removeClass('checkbox-hoverUnchk');
                    

                 });
             }
         }
         else
             $(this).parent().data("checked", false).css({ backgroundPosition: "0px 0px" });
     }
 });

CSS:

.radio {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("jQ_PLUG/Checkbox/radio.png");
	background-repeat:no-repeat;
	cursor: default;
}
.checkbox {
	float:left;
	margin: 0 0 3px;
	padding: 0 1px 0 0;
	background: transparent url("jQ_PLUG/Checkbox/safari-checkbox.png") no-repeat;
	cursor: default;
	text-align:left;
	width: 16px; height: 16px;
	background-position:0px 0px;
	vertical-align:middle;
	text-indent: 8px;
}
.checkbox-hoverUnchk {background-position:-16px 0px;}

.checkbox-hoverChk {background-position:-16px -16px;}

.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}
.selected {
	background-position: 0 -52px;
}
.block {
	width: 50%;
	float: left;
}
label {
	padding-left:10px;
	float:left;
	text-align:left;
}

Thank you very much for help. I must start learning jQuery more intensely but don't have much time.