复选框列表的selectAll()和deselectAll()引起问题
复选框列表的selectAll()和deselectAll()引起问题
提问于 2014-06-15 12:55:16
我有一个复选框列表，它是以下面的方式从数据库动态填充的。我在这里使用敲除
这很好，只要用户使用单击事件检查或取消选中复选框im，并以下面的方式进行一些计算，用户就可以检查和取消检查。
$('.options input:checkbox').click(function () {
var input = $(this);
if (input.is(':checked')) {
}
else {
}
});我还有selectall和deselectall按钮，我用下面的方式来做
选择所有函数
$('.options').children('input[type="checkbox"]').each(function () {
var input = $(this);
if (!this.checked) {
this.checked = true;
}
});取消选择
$('.options').children('input').each(function () {
if ($(this).is(':checkbox')) {
var input = $(this);
if (this.checked) {
this.checked = false;
}
});问题在于selectall和deselectall。首先，当页面加载时，手动选择复选框1和复选框3，然后单击“选择高”按钮将所有复选框选中，然后选择“取消选中所有复选框”按钮，问题就在这里，当我手动单击任何复选框时，问题就在这里--它也在做复选框1和复选框3。
我该怎么解决呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-15 14:05:26
这就是你在淘汰赛中所做的事情：
http://jsfiddle.net/s86cm/
<div class="options" data-bind="foreach:users,visible: true" style="display: none;">
<input type="checkbox" class='roles' name='roles' data-bind="attr: { value: id }, checked:isChecked" />
<span data-bind="text: name"></span>
</div>
<button data-bind="click: selectAll">select all</button>
<button data-bind="click: deselectAll">delect all</button>
$(function() {
var model = {
users : [
{ id: 1, name: 'John', isChecked: false },
{ id: 2, name: 'Max', isChecked: true },
{ id: 3, name: 'Adam', isChecked: true },
{ id: 4, name: 'Sam', isChecked: false },
]
};
var viewModel = new ViewModel(model);
ko.applyBindings(viewModel);
});
function ViewModel(model) {
var self = this;
var users = $.map(model.users, function(user) { return new User(user) });
self.users = users;
var setIsChecked = function(isChecked) {
for (var i = 0; i < self.users.length; i++){
self.users[i].isChecked(isChecked);
}
};
self.selectAll = function() {
setIsChecked(true);
};
self.deselectAll = function() {
setIsChecked(false);
};
}
function User(user) {
var self = this;
self.id = user.id;
self.name = user.name;
self.isChecked = ko.observable(user.isChecked);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24229800
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号