SORT- Checkbox JQuery
SORT- Checkbox JQuery
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sort list items alphabetically with Javascript</title>
</head>
<body>
<input type="button" id="test" value="Sort List (click again to reverse)"/>
<div id="names">
<label>x<input type="checkbox"/></label>
<label>h<input type="checkbox" value='h'/></label>
<label>f<input type="checkbox" value='f'/></label>
<label>d<input type="checkbox" value='d'/></label>
<label>y<input type="checkbox" value='y'/></label>
<label>b<input type="checkbox" value='b'/></label>
<label>a<input type="checkbox" value='a'/></label>
</div>
</body>
</html>
CSS
input{display:block}
label{display:block}
JavaScript
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string") ul = document.getElementById('names');
var lis = $("label");
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];
}
// CLICK METHOD
var desc = false;
$("#test").live('click', function() {
sortUnorderedList("list", desc);
desc = !desc;
return false;
});