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

Answer 2

您可以将输入及其各自的标签包装在容器中以方便排序。

<form>
    <div class="field-item">
        <input type="checkbox" name="vehicle" id="vehicle-bike" value="Bike" />
        <label for="vehicle-bike">Bee</label>
    </div>
    <div class="field-item">
        <input type="checkbox" name="vehicle" id="vehicle-car" value="Car" />
        <label for="vehicle-car">Apple</label>
    </div>
</form>

然后调整您的排序代码，根据标签对这些容器进行排序。

var $els = $('.field-item');

var $sorted = $($els.toArray().sort(function(a, b) {
    return $(a).find('label').text() > $(b).find('label').text()
}));

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

<强> DEMO

按字母顺序复选框输入类型

2 个答案: