如何按类别，值和已检查复选框对复选框进行排序 [英] How to sort checkboxes by class, value, and checked

问题描述

我有一个div，#subfilterNamesContainer，其中包含复选框列表.我正在尝试编写一个将复选框分为3个部分的函数.

I have a div, #subfilterNamesContainer, that contains a list of checkboxes. I am trying to write a function that will sort the checkboxes in to 3 sections.

带有class="default"的
• 复选框应按值排在首位，无论是否选中.
• 然后，我需要列出按值排序的非class="default"复选框.
• 最后，我需要显示所有未选中的NOT class="default"，并再次按值排序.

• Checkboxes with class="default" should be at the top ordered by value, regardless if it's checked or not.
• Then I need to list the checkboxes that are NOT class="default" that are checked, ordered by value.
• Finally I need to show all the NOT class="default" that are unchecked and again ordered by value.

在这三个部分之间也有一条水平线是理想的.

It would be ideal to have a horizontal rule between these three sections as well.

如何执行此任务?目的是在顶部显示用户默认复选框，然后是选中的非默认复选框，然后是非默认，未选中的复选框.只需在调用此新功能(简称为sortGiveNamesFilter)时，这不需要响应用户的检查.

How can I do this task? The goal is to show the user default checkboxes at the top, followed by the non-default checkboxes that are checked, followed by the non-default, unchecked ones. This doesn't need to be responsive to the users checking, only when this new function (let's called it sortGiveNamesFilter) is called.

<div id="subfilterNamesContainer">
    <input type="checkbox" value="X"> X <br>
    <input type="checkbox" value="A"> A <br>
    <input type="checkbox" value="A B" class="default"> A B <br>
    <input type="checkbox" value="A A" class="default"> A A <br>
    <input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
    <input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
</div>

调用新函数时的最终结果应该是:

Final result when my new function is called should be:

<div id="subfilterNamesContainer">
    <input type="checkbox" value="A A" class="default"> A A <br>
    <input type="checkbox" value="A B" class="default"> A B <br>
    <hr>
    <input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
    <input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
    <hr>
    <input type="checkbox" value="A"> A <br>
    <input type="checkbox" value="X"> X <br>
</div>

推荐答案

首先，您需要稍微修改HTML，以便在重新排列复选框后，也移动它们旁边的文本节点.为此，可以用label元素将两个节点都包围起来，如下所示:

Firstly you would need to amend your HTML slightly so that when the checkboxes are re-arranged the text node next to them is moved as well. To do this, you can surround both nodes with a label element, like this:

<div id="subfilterNamesContainer">
    <label>
        <input type="checkbox" value="X"> X
    </label>
    <label>
        <input type="checkbox" value="A"> A
    </label>
    <label>
        <input type="checkbox" value="A A" class="default"> A A
    </label>
    <label>
        <input type="checkbox" value="A B" class="default"> A B
    </label>
    <label>
        <input type="checkbox" value="F" checked="true"> F
    </label>
    <label>
        <input type="checkbox" value="E" checked="true"> E
    </label>
</div>

要实现对label元素的排序，可以使用 sort() 方法，提供您自己的函数，该函数定义了排序逻辑，以首先放置.default复选框，然后放置被选中然后未被选中的复选框，并按顺序排列每个子节.复选框的value.排序完成后，您可以搜索最后的.default和:checked元素，并在其后添加hr.像这样:

To achieve the sorting of the label elements can use the sort() method, providing your own function which defines the sorting logic to place the .default checkboxes first, then those which are checked, and then not checked, with each sub section ordered by the value of the checkbox. Once the sorting is complete you can search for the last .default and :checked elements and add an hr after them. Something like this:

function sortGiveNamesFilter() {
    $('#subfilterNamesContainer label').sort(function(a, b) {
        var $a = $(a).find(':checkbox'),
            $b = $(b).find(':checkbox');

        if ($a.hasClass('default') && !$b.hasClass('default'))
            return -1;
        else if (!$a.hasClass('default') && $b.hasClass('default'))
            return 1;

        if ($a.is(':checked') && !$b.is(':checked'))
            return -1;
        else if (!$a.is(':checked') && $b.is(':checked'))
            return 1;

        if ($a.val() < $b.val())
            return -1;
        else if ($a.val() > $b.val())
            return 1;

        return 0;
    }).appendTo('#subfilterNamesContainer');

    $('#subfilterNamesContainer .default:last, #subfilterNamesContainer :checked:last').closest('label').after('<hr />');
}

工作示例

请注意，可以通过使用三元表达式使JS代码更短，我只是让它变得冗长，以使其变得显而易见.

Note that the JS code can be made shorter with the use of ternary expressions, I just kept it verbose to make it obvious how it was working.

这篇关于如何按类别，值和已检查复选框对复选框进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！