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>
    <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 に答える
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 に答える