Skip to content

The TristateCheckbox allows any checkbox element to have an extra state defined

Notifications You must be signed in to change notification settings

epochcoder/tristate-checkbox

Repository files navigation

Description

The TristateCheckbox allows any checkbox element to have an extra state defined. this state means that some of it's children are selected, but not all of them

This gets determined by a built in dependencySelector. it is customizable to almost any context

one tristate can even set the state of another, this is all built in via events

Demo

Basic Usage

<form id="basic-usage">
	<table>
		<tr>
			<td>Basic tri-state (has little to no function like this) : </td>
			<td>
				<input id="cb-1" type="checkbox"/>
			</td>
		</tr>
	</table>
</form>
<script>
	document.observe('dom:loaded', function() {
		new TriStateCheckbox('cb-1');
	});
</script>

Advanced Usage

<form id="adv-usage">
	<table>
		<tr>
			<td>normal tri-state : </td>
			<td>
				<input id="cb-a-1" type="checkbox"/>
			</td>
		</tr>
		<tr>
			<td>child 1 : </td>
			<td>
				<input id="cb-c-1" type="checkbox"/>
			</td>
		</tr>
		<tr>
			<td>child 2 : </td>
			<td>
				<input id="cb-c-2" type="checkbox"/>
			</td>
		</tr>
		<tr>
			<td>child 3 : </td>
			<td>
				<input id="cb-c-3" type="checkbox"/>
			</td>
		</tr>
	</table>
</form>
<script>
	document.observe('dom:loaded', function() {
		new TriStateCheckbox('cb-a-1', {
			dependantSelector: 'form#adv-usage input[id^="cb-c"]'
		});
	});
</script>

About

The TristateCheckbox allows any checkbox element to have an extra state defined

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published