jQuery.筛选出列表项

Question

我的html是关于搜索框的

<input type="text" id="myInputList" placeholder="search...">

以及通过以下方式呈现的复选框列表

<ul class="list-group container" id="myList">
@foreach (var v in Model)
{
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input" id="@v.GuidId.ToString()">
<label class="custom-control-label" for="@v.GuidId.ToString()">@v.Name</label>
</div>
</li>
}
</ul>

通过使用以下内容，我可以过滤掉所需的信息

$("#myInputList").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});

现在我希望通过使用三个按钮来扩展功能

<div id="Group" class="btn-group btn-group-toggle" style="width:100%" data-toggle="buttons">
<label id="b1" active">
<input class="selected" type="radio" name="options" checked="checked"> All
</label>
<label id="b2">
<input class="selected" type="radio" name="options"> Checked
</label>
<label id="b3">
<input class="selected" type="radio" name="options"> Unchecked
</label>
</div>

点击b1后，我希望显示所有 li 的

通过单击b2，显示选中的 li 的子复选框，并

通过单击b3，显示未选中的 Li 的子复选框。

对于b1这个效果很好

$("#b1").on("click", function () {
$("#myInputList").val("");
$("#myInputList").trigger("keyup");
});

但是b2和b3呢？

Answer 1

在更改单选按钮时，您需要通过其中复选框的checked状态过滤li并显示/隐藏。

$("input[name='options']").change(function() {
var id = $(this).parent().attr('id');
var $li = $('#myList li').hide();      
if (id == 'b1') {
$li.show();
} else if (id == 'b2') {
$li.filter(function() {
return $(this).find('input').is(':checked');
}).show();
} else if (id == 'b3') {
$li.filter(function() {
return !$(this).find('input').is(':checked');
}).show();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Group" class="btn-group btn-group-toggle" style="width:100%" data-toggle="buttons">
<label id="b1">
<input class="selected" type="radio" name="options" checked="checked"> All
</label>
<label id="b2">
<input class="selected" type="radio" name="options"> Checked
</label>
<label id="b3">
<input class="selected" type="radio" name="options"> Unchecked
</label>
</div>
<ul id="myList">
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input" checked>
<label class="custom-control-label">Name 1</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input">
<label class="custom-control-label">Name 2</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input" checked>
<label class="custom-control-label">Name 1</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input">
<label class="custom-control-label">Name 2</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input" checked>
<label class="custom-control-label">Name 1</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="chkbx custom-control-input">
<label class="custom-control-label">Name 2</label>
</div>
</li>
</ul>