如何按类、值和选中项对复选框进行排序

How to sort checkboxes by class, value, and checked

本文关键字：复选框 排序 何按类      更新时间：2023-09-26

我有一个div #subfilterNamesContainer，它包含一个复选框列表。我正在尝试编写一个函数，将复选框排序为3个部分。

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

最好在这三个部分之间也有一个水平规则。

我该如何完成这项任务？目标是在顶部显示用户默认的复选框，然后显示选中的非默认复选框，再显示非默认、未选中的复选框。这不需要对用户检查做出响应，只需要在调用这个新函数（我们称之为sortGiveNamesFilter）时。

<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>

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

<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元素包围两个节点，如下所示：

<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。类似这样的东西：

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代码，我只是保持它的详细性，以清楚地表明它是如何工作的。

相关文章：