我有一个 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 代码更短,我只是让它变得冗长,以便清楚地表明它是如何工作的。
关于javascript - 如何按类、值和已选中对复选框进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36223692/