【发布时间】：2021-04-09 01:28:18
【问题描述】：
在我的 Asp.Net Core 应用程序视图中，我有一个类似的代码：
@model Color.Models.AM
<div class="container">
<div class="card level-3">
<h4>AM</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div>
<input id="txt" type="text" value="" />
<input id="btn" type="button" value="Search" />
</div>
<div class="form-group">
<input id="cboAll" type="checkbox" value="CheckAll / unCheck" />
ALL<br />
<div class="wrapper">
@foreach (var cm in Model)
{
<div><input id=@cm.Name type="checkbox" name="selectedCdos" value=@cm.Id class="tipoo" />@cm.Name Roo: @cm.Roo</div>
}
</div>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
</div>
<style>
.wrapper {
width: 500px;
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
.card {
background-color: #fff;
border-radius: 10px;
margin: 10% auto;
position: relative;
padding: 34px;
color: #444;
cursor: pointer;
overflow-x: auto;
}
.card.level-3:hover:before {
box-shadow: 0 0 80px #999999;
}
</style>
重要的是要明白，这会生成一个数量 N 的 CheckBoxes 等于我的数据库中 AM 实体的数量，它使用 AM 的属性 Id 作为每个 CheckBox 的值。
模型的代码是这样的：
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
namespace Color.Models
{
public class AM
{
[key]
public int Id { get; set; }
[Required]
public string Name { get; set; }
[Required]
public int Roo { get; set; }
}
}
最后是这张视图的图片： pic of the view
所有这些工作都很好，没有问题，我检查的复选框被发送到控制器，控制器使用所选值进行操作。
我需要什么帮助，但我遇到了问题，但视图末尾的 JavaScript 代码如下：
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function () {
$("#cboAll").click(function () {
if ($(this).is(":checked")) {
$(".tipoo").prop('checked', true);
}
else {
$(".tipoo").prop('checked', false);
}
});
$("input[id*=btn]").click(function () {
var searchvalue = $("input[id*=txt]").val();
if (searchvalue != "") {
$(".tipoo").each(function () {
if ($(this).val() == searchvalue) {
$(this).show();
}
else {
$(this).hide();
$(this.nextSibling).wrap('<span style="display:none"></style>');
}
})
}
else {
$("#cboAll,.tipoo").show();
}
})
})
</script>
此代码生成选择所有值的 ALL 复选框，以及允许过滤它们的搜索按钮，但它有以下问题（因为基本上 javascript 代码不能按我希望的方式工作）。
1) 当我希望它按 Id 或复选框中的另一个标签过滤它时，它会按其值过滤复选框（因为我在“value=”中拥有的是我需要发送给控制器，而“Id”可以是视图显示的文本）。
现在假设我将“value=@cm.Id”更改为“value=@cm.Name”来测试搜索过滤器的工作原理，在这种情况下会出现以下问题：
2) 代码仅过滤完全匹配下的数据，而这不是我想要的。
Pic that shows that if I search for "Pabl" it finds nothing.
例如，如果写“Mateo”并按下搜索按钮；好的，该视图仅向我显示了 Mateo 的复选框，如果我写 Pablo，则相同，但是如果我写例如“Mat”或“Pabl”，这不会找到我两者中的任何一个；当我想要这样时，当我搜索“Pabl”时，它会向我显示所有包含用字符序列“Pabl”编写的内容的 CheckBox，唯一的例外是脚本考虑空格，所以如果我寻找 Jan ，它找到我“Jan Dos”，因为“Jan”和“Dos”这两个词之间有一个空格分隔。 但正如我所说，我希望它的工作方式是在我搜索“Pabl”时显示所有包含序列“Pabl”的复选框。
3) ALL 按钮始终选择所有内容。
JavaScript 代码现在的工作方式是，如果我过滤数据并按 ALL，则所有复选框都会被选中，即使是那些被隐藏的复选框，如果我希望单击 ALL 并过滤数据，这只会选中所有通过过滤器的复选框（未隐藏的复选框）。
4) 如果我第二次单击搜索按钮，复选框的文本就会消失。
有人真的可以帮我解决这 4 个问题，并改进我的 Javascript 代码吗？
我已经在 Internet 上寻找替代的 Javascript 代码来完成这一切，但没有一个包含我提到的所有功能，而我喜欢原始代码的简单之处在于它允许我轻松控制数据，因为我很容易在控制器中获取 Checkbox 值；如果Div代码是这样的。
【问题讨论】：
标签： javascript jquery asp.net-mvc asp.net-core checkbox