0

我目前有一个包含复选框的表单，但是文本不是按字母顺序排列的。我见过很多列表的例子，而不是复选框的例子。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

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

4

2 回答 2

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); 
});

小提琴

于 2013-03-27T21:54:07.207 回答
1

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

<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));
});

演示

于 2013-03-27T22:03:16.990 回答