Quick Jump ↵
In order to scale to 1000s of records, the Checked Picker has certain criteria, ie. you must set up the HTML properly.
Add <script type="text/javascript">$m.wand.checked_picker = true;</script> inside your <body> tag.
<script type="text/javascript">$m.wand.checked_picker = true;</script>
<body>
Use the example below as a guide for building your own! 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.
YOUR_GROUP
ice_cream_group
UNIQUE
ice_cream_choice
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
<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>
The checkboxes need to be sorted and separated before they get to the browser with the Checked checkboxes on the left and unchecked on the right.
Checked Pickers aren't currently supported in touch-based browsers – they don't move to the left and right and back again.
« Back to the main documentation
Checked Picker: Magic JavaScript Checked Picker: Magic JavaScript