Checked Picker: Magic JavaScript

Usage

In order to scale to 1000s of records, the Checked Picker has certain criteria, ie. you must set up the HTML properly.
Below is a chunk of code to get you started. The easiest way to use it – copy/paste into your text editor and replace everything in UPPERCASE with your strings.
For example, replace YOUR_GROUP with ice_cream_group and UNIQUE with ice_cream_choice.

<input type="text" value="" onkeypress="return $m.h.checked_picker.test(event)" onkeyup="$m.h.checked_picker.search('YOUR_GROUP', this.value, event)" autocomplete="off" class="mjf_checked_picker_search_box" id="YOUR_GROUP_search">
<img src="/resources/javascript/magic/images/icons/icon_clear.png" class="mjf_checked_picker_clear_img" onclick="$m.h.checked_picker.clear('YOUR_GROUP')" alt=""><br>

<span class="mjf_checked_picker_box mjf_checked_picker_box_left">
	<span class="mjf_checked_picker_list" id="checked_picker_list_YOUR_GROUP_on">
		<label for="UNIQUE_1" id="UNIQUE_1_label"><input type="checkbox" data-mjf="checked_picker" data-mjf_checked_picker_group="YOUR_GROUP" data-mjf_checked_picker_label="UNIQUE_1_label" name="UNIQUE" value="VALUE" checked="checked" id="UNIQUE_1">UNIQUE_1</label>
		<label for="UNIQUE_2" id="UNIQUE_2_label"><input type="checkbox" data-mjf="checked_picker" data-mjf_checked_picker_group="YOUR_GROUP" data-mjf_checked_picker_label="UNIQUE_2_label" name="UNIQUE" value="VALUE" checked="checked" id="UNIQUE_2">UNIQUE_2</label>
	</span>
	<a href="#" class="mjf_checked_picker_toggle_all_link" onclick="$m.h.checked_picker.toggle_all('YOUR_GROUP', false); return false;">Uncheck All</a>
</span><br>

<span class="mjf_checked_picker_box mjf_checked_picker_box_right">
	<span class="mjf_checked_picker_list" id="checked_picker_list_YOUR_GROUP_off">
		<label for="UNIQUE_3" id="UNIQUE_3_label"><input type="checkbox" data-mjf="checked_picker" data-mjf_checked_picker_group="YOUR_GROUP" data-mjf_checked_picker_label="UNIQUE_3_label" name="UNIQUE" value="VALUE" id="UNIQUE_3">UNIQUE_3</label>
		<label for="UNIQUE_4" id="UNIQUE_4_label"><input type="checkbox" data-mjf="checked_picker" data-mjf_checked_picker_group="YOUR_GROUP" data-mjf_checked_picker_label="UNIQUE_4_label" name="UNIQUE" value="VALUE" id="UNIQUE_4">UNIQUE_4</label>
	</span>
	<a href="#" class="mjf_checked_picker_toggle_all_link" onclick="$m.h.checked_picker.toggle_all('YOUR_GROUP', true); return false;">Check All</a>
</span>

Add <script type="text/javascript">$m.wand.checked_picker = true;</script> inside your <body> tag

Example

Hashes
qnkqbkr6o1e3lcsa05rqc0u1a icfanp1zedwokts2p3ehac1n3 1vpxcbml4gzrn6uirmucm8djo u68ywikhgqt4i5vedgpte7i57 1kt4kig3dm9i4n9hhrslvs78c ph4cal5qsr05hc06sn0iuxukn elirwb9en5zrsxqar8z6hb0gq 932tb1nn0p9o4tl0efdylt1am q5x3emlyvq6fxjt7eiwksp4yv ywxu6d2k4hjmwcb4eh4xkfxm8 zaw0cgzku2ln46z308hcp3b46 kw4wjnxg1hf8rhwcvgh1u3nap ueo6dqktrf8o3rega1cujhad4 u00aqvksy1esmpke9n3rkvrrs 05tmlr2ey5l2h4r2jad4do990 vg1t65rqhd2uh9bd8orj0vg23 9cm0n27nr96hu3ph23owlwbul vue0tm4t2rxrircjkxzkfqm2z bndtkaqa68fu4vx0g83mexlsg i35zzfzodr617xxpsnzmk470g b3ga2gew8ya722o8fmcona8ec xpdkhvuj6vayjp0fbcd0uwnb4 fbhmue5kjs700xdzmfybv0rz5 y90fhsfysg2d11q2gdyn1kse5 jidxxmv9zv1jum8lu1g1k87re Uncheck All i25ihyn3akom29w0yynmwve6i 1cx1oecfydfzf81t4cvlo3kt9 al2ixwryampdr9j0jonuvv4bq mbldhhknvfi5c9cmpwt8ztqct g7bciuqeehwew1fepn1qof1ew gr0xr83m6oi8ipwvsyo1bzvli lx8ukmytoky5e1sz101qhsc5k 3acrluh3vtj82c0hvy94h3zxh zz1fgf84h4fvu04vzz9veigi4 e17tccjcuyasfyeyfutffvpsj Check All

This field is required

Notes

The checkboxes need to be sorted and separated before they get to the browser.
Checked checkboxes go on the left and unchecked go on the right.
Most of the attributes simply tie the checkboxes to each other and to their labels.
The code below works well in <p> and <td> tags.

« Back to the main documentation