在排序之前，从部分复选框列表中排除项目

Exclude items from part of checkbox list before sorting

本文关键字：列表 复选框 排除 项目 排序      更新时间：2023-09-26

真不敢相信我被困在这上面了!JS小提琴https://jsfiddle.net/27a8qypq/显示国家出现，按字母顺序，从3个区域复选框选择的任何组合。在未来，我将希望在JS代码中使用指令来限制国家列表的范围。例如，即使选中了所有3个复选框，我也可能希望代码不显示所有亚洲国家，但保留显示其余国家的字母顺序。我试过使用。filter()和。detach()和。remove()，正如之前的帖子所建议的，但我无法得到任何工作。

谁能建议我如何添加一个小修改JS代码，这样我就可以排除国家从1或2个地区显示?理想情况下，我不想重构HTML。由于

<label>
<input type="checkbox" name="colorCheckbox" id="Europe" />Europe</label>
<label>
<input type="checkbox" name="colorCheckbox" id="Africa" />Africa</label>
<label>
<input type="checkbox" name="colorCheckbox" id="Asia" />Asia</label>

<div class="mywrapper">
<label class="myEurope">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEurope">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEurope">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myAfrica">
<input type="checkbox" value="Nigeria" />Nigeria</label>
<label class="myAfrica">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfrica">
<input type="checkbox" value="Kenya" />Kenya</label>
<label class="myAsia">
  <input type="checkbox" value="Thailand" />Thailand</label>
<label class="myAsia">
  <input type="checkbox" value="China" />China</label>
<label class="myAsia">
  <input type="checkbox" value="Japan" />Japan</label>
</div>


function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".mywrapper").children("label").detach().sort(sortByText)
$(".mywrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})


.mywrapper {
border: 1px solid blue;
height: 200px;
width: 300px;
border: 1px solid blue;
}
.myEurope {
display: none;
}
.myAfrica {
display: none;
}
.myAsia {
display: none;
}

我不知道我是否完全理解了你的问题，但我有一些目的。只需将disabled属性添加到您不想在结果中拥有的所有复选框中，并使用此修改您的js (JSFiddle在这里，我已经禁用了西班牙为例):

$('input[type="checkbox"]').click(function() {
    $('.my' + $(this).attr("id") + " > input:enabled").each(function() {
        $(this).parent().toggle();
    });
});

明白了!我所需要做的就是在。slidetoggle(0)之前添加。removeclass(类名);jQuery。所以，如果我想排除国家在类"myAsia"我的jQuery调整如下:

function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".mywrapper").children("label").detach().sort(sortByText)
$(".mywrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).removeClass("myAsia").slideToggle(200)
})
相关文章：