Алфавитный флажок Тип ввода

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

Вы должны обернуть эти textnodes в этикетке:

<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