Added state class to label of checkbox/radio

Author: gseguin

js/jquery.mobile.forms.checkboxradio.js

@@ -16,6 +16,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 			//filter works though.
 			label = input.closest("form,fieldset,:jqmData(role='page')").find("label").filter('[for="' + input[0].id + '"]'),
 			inputtype = input.attr( "type" ),
+			checkedClass = "ui-"+ inputtype + "-on",
+			uncheckedClass = "ui-"+ inputtype + "-off",
 			checkedicon = "ui-icon-" + inputtype + "-on",
 			uncheckedicon = "ui-icon-" + inputtype + "-off";
 
@@ -25,6 +27,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 		$.extend( this,{
 			label			: label,
 			inputtype		: inputtype,
+			checkedClass    : checkedClass,
+			uncheckedClass  : uncheckedClass,
 			checkedicon		: checkedicon,
 			uncheckedicon	: uncheckedicon
 		});
@@ -133,9 +137,11 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
 		// input[0].checked expando doesn't always report the proper value
 		// for checked='checked'
 		if ( $(input[0]).prop('checked') ) {
+			label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
 			icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
 
 		} else {
+			label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
 			icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
 		}
 

themes/default/jquery.mobile.theme.css

@@ -828,8 +828,8 @@ a.ui-link-inherit {
 .ui-icon-radio-off {
 	background-color: transparent;	
 }
-.ui-icon-checkbox-on,
-.ui-icon-radio-on {
+.ui-checkbox-on .ui-icon,
+.ui-radio-on .ui-icon {
 	background-color: #4596ce; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
 }
 .ui-icon-searchfield {