javascript - 按字母顺序排列的复选框输入类型

Question

我目前有一个包含复选框的表单，但文本不按字母顺序排列。我见过很多列表的例子，但复选框的例子不多。 http://jsfiddle.net/fG9qm/

<form>
    <input type="checkbox" name="vehicle" value="Bike"> Bee
    <input type="checkbox" name="vehicle" value="Car" > Apple
</form>

我设法获取了一个示例的片段，但是，如果我尝试更改输入的值，则复选框会在没有文本的情况下移动 - 我该如何解决这个问题？

var $els = $('input');

var $sorted = $($els.toArray().sort(function(a, b) {
    return a.value > b.value;
}));

$els.each(function(i) {
    $(this).after($sorted.eq(i));
});

此外，有没有办法使用文本而不是值，例如

return a.input.text > b.input.text

任何示例或帮助将不胜感激 - 谢谢

Answer 1

您应该将这些文本节点包装在标签中:

<form id="prac">
    <label><input type="checkbox" name="vehicle" value="Bike" /> Apple</label>
    <label><input type="checkbox" name="vehicle" value="Car" /> ABear</label>
</form>

然后对标签进行排序

var myform = $('#prac'),
    els    = $('label', myform).get(),
    sorted = els.sort(function(a, b) {
        return $(a).text().toUpperCase()
                   .localeCompare( $(b).text().toUpperCase() );
});

$.each(sorted, function(idx, itm) { 
     myform.append(itm); 
});

FIDDLE