按字母順序複選框輸入類型

我目前有一個包含複選框的表單，但是文本不是按字母順序排列的。我已經看到很多列表的例子，對複選框來說並不多。 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

任何實例或幫助將不勝感激 - 感謝

來源

2013-03-27 Jose

如何在這些形式的輸入被添加到HTML，PHP，RUBY，用手？我會以這種方式親自排序 – 2013-03-27 21:53:20

我現在使用ruby創建表單輸入......但只是認爲這將更容易解釋 – Jose 2013-03-27 21:55:41

我的觀點是，如果您要從數據庫中提取這些數據，你自己寫入輸入。否則，你正在創建一個DOM，然後重新排序它，這似乎是不必要的開銷。如果你需要在事實之後做到這一點，由於一些用戶的交互，這是一個不同的故事。您需要將標籤包裝在標籤中，並將標籤中的輸入包裹在標籤中，如果您希望它們保持在一起。 – 2013-03-27 21:58:34

你應該換那些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

然後排序

來源

2013-03-27 21:54:07 adeneo

您可以將輸入和它們各自的標籤包裝在容器中以方便分類。

<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

來源

2013-03-27 22:03:16

按字母順序複選框輸入類型

回答

相關問題