JQuery Checkbox Sort
JQuery Checkbox Sort
by InvestReads
HTML
<div id="names">
<span id='SABRE/XXOTHER'><label>SABRE/XXOTHER</label><input type="checkbox" name="SABRE/XXOTHER" value="SABRE/XXOTHER" class="sNames" text="SABRE/XXOTHER">
</span>
<span id='SABRE/ANOTHER'><label>SABRE/ANOTHER</label><input type="checkbox" name="SABRE/ANOTHER" value="SABRE/ANOTHER" class="sNames" text="SABRE/ANOTHER">
</span>
<span id='SABRE/XNOTHER'><label>SABRE/XNOTHER</label><input type="checkbox" name="SABRE/XNOTHER" value="SABRE/XNOTHER" class="sNames" text="SABRE/XNOTHER">
</span>
<span id='SABRE/BNOTHER'><label>SABRE/BNOTHER</label><input type="checkbox" name="SABRE/BNOTHER" value="SABRE/BNOTHER" class="sNames" text="SABRE/BNOTHER">
</span>
<span id='SABRE/FNOTHER'><label>SABRE/ZZNOTHER</label><input type="checkbox" name="SABRE/FNOTHER" value="SABRE/FNOTHER" class="sNames" text="SABRE/FNOTHER">
</span>
</div>
CSS
.sNames{display:block;padding:2px;margin:2px;text-indent:30px;
overflow: hidden;
text-overflow: ellipsis;
}
JavaScript
function sortNames(div, sortDescending) {
if (typeof div == "string") div = $('#names');
var lis = $("span");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if (sortDescending) vals.reverse();
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
var desc = false;
sortNames("list", desc)
$("input").live('click',function(){
alert("clicked - " + $(this).val());
});