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;
});

Radio 1

Radio 2

Radio 3

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
checkBoxchange	change in terms of checked/unchecked-state


$('input')
	.checkbox()
	.bind('checkBoxchange', function(e, ui){
		//checked or unchecked || $(this).is(':checked') === ui.checked
	});

Configuration
option	description
replaceInput: [true\|false]	hide original input-element
addLabel: [true\|false]	add checkbox/radiobutton state-classes also to the label-element


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

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);

Download & Bugtracker

Licenses

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

More script and css style : www.htmldrive.net