[英]Checked attribute for checkbox list in knockout
我有两个数组应显示并显示为复选框列表。 主要思想是单击第一个列表的元素,以将元素添加到第二个列表。 html代码如下所示
<div class="tab-pane" id="ColumnHeading">
<div class="row">
<div class="form-group span4">
<h4>Column Headings</h4>
<ul class="icons-ul" data-bind="foreach: staticItem.ColumnHeadingList.ColumnHeadingListItem" >
<li>
<div class="span2">
<input class="selectedHeading" type="checkbox" data-bind=" click: $parent.myCheck, checkedInArray: $parent.Params.Item.ColumnHeadingList.ColumnHeadingListItem, attr: { value: Value }" />
<span data-bind="text: Name"></span>
</div>
</li>
</ul>
</div>
<div class="form-group span4" style="margin-left: -90px; margin-top: 15px">
<div class="icons-ul" data-bind="foreach: Params.Item.ColumnHeadingList.ColumnHeadingListItem" >
<div class="span4">
<input type="checkbox" data-bind="customcheck: IntOnly" />
</div>
</div>
</div>
<div class="span6">
<p class="validationMessage" data-bind="validationMessage: Params.Item.ColumnHeadingList.ColumnHeadingListItem"></p>
</div>
</div>
值“ IntOnly”是复选框两个列表内的每个对象的属性。
我的复选框第一个列表上的click事件的函数如下所示
self.myCheck = (function(e) {
var index = self.staticItem.ColumnHeadingList.ColumnHeadingListItem().map(function(e) { return e.Value(); }).indexOf(this.Value());
if (self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly() !== "Y") {
self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("Y");
var o = self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index];
var flag = false;
for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {
if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
flag = true;
}
}
if (flag == false || self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length == 0) {
var newObject = jQuery.extend(true, {}, this);
self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.push(newObject);
}
} else { //checked==true
self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("N");
for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {
if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.splice(i, 1);
}
}
}
return true;
});
代码可以正常工作,将元素添加到第二个列表并保存到IntOnly cuz customcheck函数上,检查IntOnly的值是否为“ Y”以选中复选框,但是即使在获取该属性时,也可以将其保存为第一个列表值,然后在将表单发送到服务器后选中那些复选框,并查看它们进行编辑。
一些建议,请为语法感到抱歉。
我举了一个非常简单的示例,其中一个复选框构建了另一个列表。 我想在这里想要的关键是subscribe
checked变量,以便当其值更改时(无论是选中还是未选中)都可以采取措施。
我的函数只是检查值是true还是false,然后push
list元素push
第二个列表或从第二个列表中remove
。 方便地,我可以为两个列表使用相同的数据项。 我只是将复选框绑定到其他成员变量,所以第二个列表复选框独立于第一个列表中的相应复选框。
let vm = { list1: [1, 2, 3].map((n) => { const result = { label: `op${n}`, intOnly: ko.observable(false), anotherCheckValue: ko.observable(false) }; result.intOnly.subscribe((isChecked) => { if (isChecked) { vm.list2.push(result); } else { vm.list2.remove(result); } }); return result; }), list2: ko.observableArray() }; ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach:list1"> <label> <input type="checkbox" data-bind="checked: intOnly" /> <span data-bind="text: label"></span> </label> </div> <div data-bind="foreach:list2"> <label> <input type="checkbox" data-bind="checked: anotherCheckValue" /> <span data-bind="text: label"></span> </label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.