Javascript 如何通过复选框值筛选表

在我的Razor视图中，我有一个包含3个未显示属性的表<代码>Id操作，

Id级别

和

Id部分

在该表上方，我有3个复选框列表，用于每个位置、级别和部分，并使用适当的ID作为值

@foreach（Model.Sections中的var节）
{

@Html.Encode（section.Text）

}   

注意：

section.Value

是表行中也使用的元素的ID

表本身构建起来相当简单：

@foreach (var item in Model.Offers) 
{
    <tr data-bind="visible: data.IsChecked == true ">
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Location)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Text)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Value)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.IsChecked)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Level)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", new { id=item.ID })
    </td>
</tr>
}


<script type="text/javascript">
    var data = @Html.Raw(Json.Encode(Model.Sections));

    function FormViewModel(data) {
        this.data = ko.observableArray(data);
    }

    window.viewModel = new FormViewModel(data);

    console.log(viewModel.data());    
    ko.applyBindings(viewModel);
</script>

@foreach（Model.Offers中的变量项）
{
@DisplayFor（modelItem=>item.Description）
@DisplayFor（modelItem=>item.Location）
@DisplayFor（modelItem=>item.Section.Text）
@DisplayFor（modelItem=>item.Section.Value）
@DisplayFor（modelItem=>item.Section.IsChecked）
@DisplayFor（modelItem=>item.Level）
@ActionLink（“详细信息”，“详细信息”，新的{id=item.id}）
}
var data=@Html.Raw（Json.Encode（Model.Sections））；
函数FormViewModel（数据）{
this.data=ko.observatarray（数据）；
}
window.viewModel=新表单viewModel（数据）；
log（viewModel.data（））；
应用绑定（视图模型）；

/编辑： 我已经将代码更新到我的实际混乱状态。Model.Sections是一个ViewModel，它与Model.Offers.Section使用的ViewModel相同。两者都包含值、文本和IsChecked属性

如何比较这两个行并仅显示选中该节的表行

请对我慢一点。 我猜你说的“行”是指李。jQuery库中的

each（）

方法用于迭代数组，在这种情况下，jQuery选择器返回的匹配元素数组

$（'input[type=“checkbox”]”）

我猜你说的“行”是指李。jQuery库中的

each（）

方法用于迭代数组，在这种情况下，jQuery选择器返回的匹配元素数组

$（'input[type=“checkbox”]”）

---

除非必须，否则我不会使用jQuery的每一个

knockout通过foreach方法提供您的视图。使用它和if语句或可见绑定

<ul data-bind="foreach: entity">
    <!-- ko if:checked() -->
         <!-- display your Li here -->
         <li></li>
    <!-- /ko -->
  </ul>

或者，您可以删除koif-container-less语句并使用以下语句

 <li data-bind="visible: checked()"></li>

但请记住，这两个测试都是说，如果checked等于true。如果您的值是一个字符串，则需要针对字符串进行测试

编辑

如果您有一些id或值要测试，您可以这样做-

<li data-bind="visible: section.checked() === true"></li>

---

或者其他一些逻辑测试

除非必须，否则我不会使用jQuery的每个测试

knockout通过foreach方法提供您的视图。使用它和if语句或可见绑定

<ul data-bind="foreach: entity">
    <!-- ko if:checked() -->
         <!-- display your Li here -->
         <li></li>
    <!-- /ko -->
  </ul>

或者，您可以删除koif-container-less语句并使用以下语句

 <li data-bind="visible: checked()"></li>

但请记住，这两个测试都是说，如果checked等于true。如果您的值是一个字符串，则需要针对字符串进行测试

编辑

如果您有一些id或值要测试，您可以这样做-

<li data-bind="visible: section.checked() === true"></li>

或者其他一些逻辑测试，如果您：

向ul提供包含复选框的id

给桌子一个id

对包含id的tr css类使用某种约定

那么你可以-：

如果你：

向ul提供包含复选框的id

给桌子一个id

对包含id的tr css类使用某种约定

那么你可以-：

---

这是一种尝试，在使用knockout时，我假设Serv正在尝试做一个精简版本。这是一个对象列表上的简单过滤器示例，可以轻松扩展以包括更多过滤器和更复杂的模型

小提琴

简单过滤器视图模型：

function filterViewModel(data) {
    var self = this;
    self.text = ko.observable(data.text);
    self.checked = ko.observable(data.checked);
}

精简的报价视图模型：

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

主视图模型：

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

HTML:

这是一次尝试，将knockout与我假设的Serv尝试的精简版本一起使用。这是一个对象列表上的简单过滤器示例，可以轻松扩展以包括更多过滤器和更复杂的模型

小提琴

简单过滤器视图模型：

function filterViewModel(data) {
    var self = this;
    self.text = ko.observable(data.text);
    self.checked = ko.observable(data.checked);
}

精简的报价视图模型：

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

主视图模型：

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

HTML:

我猜你只是想做一些简单的客户端过滤？看看这把小提琴：

因为将有许多部分，所以在JS中硬编码它们并不理想。相反，您可以使用.NET在TR元素中输出它们

e、 （如果你用我的小提琴）

---

我猜你只是想做一些简单的客户端过滤？看看这把小提琴：

因为将有许多部分，所以在JS中硬编码它们并不理想。相反，您可以使用.NET在TR元素中输出它们

e、 （如果你用我的小提琴）

---

如果tr的样式被选中（设置为n），则需要将其设置为无