jQuery UI: Radiobutton- und Checkbox-Replacement


	$('input').checkBox();


$('#toggle-all').click(function(){
	$('#example input[type=checkbox]').checkBox('toggle');
	return false;
});
$('#check-all').click(function(){
	$('#example input[type=checkbox]').checkBox('changeCheckStatus', true);
	return false;
});
$('#uncheck-all').click(function(){
	$('#example input[type=checkbox]').checkBox('changeCheckStatus', false);
	return false;
});

CheckBox 1

CheckBox 2

CheckBox 3


$('#check-2').click(function(){
	$('#example input[type=radio]:eq(1)').checkBox('changeCheckStatus', true);
	return false;
});
$('#native').click(function(){
	//native methode
	$('#example input[type=radio]:eq(0)').attr({checked: true, disabled: true})
		//reflect the current state
		.checkBox('reflectUI');
	return false;
});
$('#native-prop').click(function(){
	//native methode prop (in case of jQuery 1.6 and higher and the prop method you won't need to reflect the state manually)
	$('#example input[type=radio]:eq(2)').prop({checked: true});
	return false;
});

Radio 1

Radio 2

Radio 3

Configuration
option	description
replaceInput: [true\|false]	hide original input-element
addLabel: [true\|false]	add checkbox/radiobutton state-classes also to the label-element
addVisualElement: [true\|false]	adds a span element as a replacement for the input element (if you turn this to false, you can still style the label-element) (see label-only demo


$('input').checkbox({
	addLabel: false
});

Classes to style label/visual element
class	description
ui-radio/ui-checkbox	role style always attached
ui-radio-hover/ui-checkbox-hover	attached on mouseenter/focus and removed on mouseleave/blur
ui-radio-checked/ui-checkbox-checked	attached, if checked
ui-radio-disabled/ui-checkbox-disabled	attached if control is disabled
radio-focus/checkbox-focus	attached on focus and removed on blur
radio-invalid/checkbox-invalid	HTML5 validity test (works also in IE with webshims lib)

events
event	description
click	click on associated label, checkbox/radiobutton or visual element (last since version 1.3)
checkboxdisabledchange	change in terms of disabled-state
checkcoxchange	change in terms of checked/unchecked-state


$('input')
	.checkbox({
		'change': function(e, ui){
			//checked or unchecked || $(this).is(':checked') === ui.checked
		},
		'disabledchange': function(e, ui){
			//$(this).attr('disabled') === ui.disabled
		}
	})
;

extra-methods
method	description
reflectUI	transfer the current states (disabled, checked) of the original input-element to the label and visual replacement-element
changeCheckStatus [true\|false]	true -> check \| false -> uncheck
toggle	toggles checked-state
enable	enables disabled checkboxes
disable	disables enabled checkboxes


//$('input').checkbox(); ...
//...
//check first checkbox
$('input:first').checkbox('changeCheckStatus', true);

Back to the checkbox and radiobutton replacement - tutorial, Back to protofunc