Javascript 击出js按钮单击选择所有复选框

我正在使用Knockout js进行绑定，我正在使用复选框绑定数据列表，我正在获取数据并绑定到列表项，包括所有项的复选框，现在我需要创建新的按钮名“全选”当我点击该按钮时，我需要选中所有复选框，我需要从选中的复选框中获取所有数据。如何实现这一点需要帮助

<div>
<input type="button" value="Select-All" data-bind="click:SelectAll" />
</div>
<div  id="List" data-bind="foreach:items">
<ul>
<li>
<span data-bind="text:userId" style="display:none"></span>
<span style="margin-top: 10px;font-size: 22px;font-weight: bold;padding-left:0px;" data-bind="text:username"></span>
<input  type="checkbox" data-bind="value:userId(),click:$root.toggle" />                   
</li>
</ul>
</div>

 //ViewModel
function userViewModel()
 var self=this;
     {
    function userList(userId, userName)
     {
      var self=this;
     self.userID=ko.observable(userId);
     self.userName=ko.observable(userName);
     self.Selected = ko.observable(false);
     }
   self.toggleAssociation = function (item) {
     //here i am getting the individual selected checkbox Item 
   }

 //This part is not working 
  self.SelectAll = function() {
  console.log("in")
 self.items().forEach(function(item) {
    item.Selected(true);
});
  };

   self.items = ko.observableArray();
     self.add = function (userId, userName,){
     self.items.push(new FriendsContact(userId, userName)
   }
};

 //Page Load  
 $(function () {
var viewModel = new userViewModel();
ko.applyBindings(viewModel);

 //Get the data from database//
 $.ajax({
    type: "GET",
    dataType: "json",
    contentType: 'application/json; charset=utf-8',      
    url: baseUrl + 'xxx/xxx/xxxxx',
    success: function (data) { 
            $.each(data, function (key, value) {
                viewModel.add(value.userId, value.userName)
            });
    }
})
});

//视图模型
函数userViewModel（）
var self=这个；
{
函数用户列表（用户ID、用户名）
{
var self=这个；
self.userID=ko.observable（userID）；
self.userName=ko.observable（用户名）；
自选择=可观察（假）；
}
self.toggleAssociation=功能（项目）{
//在这里，我得到了单个选中的复选框项
}
//这部分不起作用
self.SelectAll=函数（）{
console.log（“登录”）
self.items（）.forEach（函数（项）{
项。选中（true）；
});
};
self.items=ko.observearray（）；
self.add=函数（用户ID、用户名）{
self.items.push（新FriendsContact（userId，userName）
}
};
//页面加载
$（函数（）{
var viewModel=new userViewModel（）；
应用绑定（视图模型）；
//从数据库中获取数据//
$.ajax({
键入：“获取”，
数据类型：“json”，
contentType:'application/json；charset=utf-8'，
url:baseUrl+'xxx/xxx/xxxxx'，
成功：函数（数据）{
$。每个（数据、函数（键、值）{
添加（value.userId，value.userName）
});
}
})
});

您需要向

用户视图模型添加一个新方法

：

self.SelectAll = function() {
    self.items().forEach(function(item) {
        item.Selected(true);
    });
};

@正确的做法是，您必须在元素上循环并设置

项。已选择（true）

。现在的问题是：

<input  type="checkbox" data-bind="value:userId(),click:$root.toggle" />

• 首先，复选框被映射到

  userId

  ，而不是

  选中的
  

• 第二，复选框没有值绑定。它有

  已选中的
  绑定。因此它应该是：

此外，您应该避免使用

$root

。您可以将其替换为

$parent.toggle

---

在函数作用域开始放置

{

之前，不能定义变量。下面的减速是错误的

function userViewModel()
  var self=this;
     {

根据我从你的代码中看到的，我将向你展示如何处理这样的事情

例如：

HTML:

 <div>
      <input type="button" value="Select-All" data-bind="click:SelectAll,visible:ShowSelectAllBtn" />
      <input type="button" value="UnSelect-All" data-bind="click:UnSelectAll,visible:ShowSelectAllBtn() == 0" />
    </div>
    <div>
      <input type="button" value="Add" data-bind="click:add" />
    </div>
    <div  id="List" data-bind="foreach:items">
      <ul>
        <li>
          <span data-bind="text:userId"></span>
          <span style="margin-top: 10px;font-size: 22px;font-weight: bold;padding-left:0px;" data-bind="text:userName"></span>
          <input  type="checkbox" data-bind="checked:Selected" />                   
        </li>
      </ul>
    </div>

var data = [{userId:1 , userName : "UserName1"},{userId:2 , userName : "UserName2"}];

function userViewModel(){
   var self = this;
   self.items = ko.observableArray();
   self.ShowSelectAllBtn = ko.observable(true);
   self.loadData = function (){
     // here you have your ajax 
     //maping fake data assuming it is inside the ajax's success
     self.items($.map(data, function (item) {
       return new userItemViewModel(item);
     }));
   }
  self.SelectAll = function() {
    self.ShowSelectAllBtn(false);
    ko.utils.arrayForEach(self.items(), function (item) {
      item.Selected(true);
    });
  };
  self.UnSelectAll = function() {
    self.ShowSelectAllBtn(true);
    ko.utils.arrayForEach(self.items(), function (item) {
      item.Selected(false);
    });
  };
  var i = 2;
  self.add = function (userId, userName){
    // creating a fake json object with a userId and a userName
    userId = i++;
    userName = "userName" + i;
    obj = {userId:userId , userName : userName} ;
    self.items.push(new userItemViewModel(obj) );
  }
};

var userItemViewModel = function (data){
    var self = this;
    self.userId = ko.observable(data.userId);
    self.userName = ko.observable(data.userName);
    self.Selected = ko.observable(false);
    self.Selected.subscribe(function(newValue){
     //individual selected checkbox 
       console.log(newValue);
       console.log(self.userId());
       console.log(self.userName());
    }, self);
}

var viewModel = new userViewModel();
ko.applyBindings(viewModel);
// Load data
viewModel.loadData();

---

@谢谢你的时间，它不工作，它没有点击功能，当我点击selectAll按钮时，它在foreach之外item@Nikil，因为“它在foreach项之外”，您的作用域已经是

$root

，如果您确实在

self

上声明了

SelectAll

，您应该会没事。否则请提供更多的代码。@Nikil，您是否缺少

self

的声明（类似于

var self=this

）？首先检查您的控制台是否有错误。不，我已经声明了，我在发布此问题时错过了声明部分。您确定，除了上述问题之外，您的代码还在工作吗？我尝试创建了一个小提琴，并发现了许多错误issues@yes它与所有其他设备一起工作正常function@thanks，但我不知道为什么选择按钮会没有点击self.SelectAlli函数我试过了，但是当我在foreach“foreach:items”循环中添加selectAll按钮时，如果我在foreach循环之前添加它，它就不起作用了working@Nikil作用域一定有问题。请尝试在范围中记录一个临时变量。@感谢您的时间，这确实很有帮助，但我无法选中“个人”复选框""我从中获取特定用户ID的切换，现在不起作用，我在单击复选框时获取单个值，现在我想调用新函数，该函数应获取单个复选框的数据我已将单击事件添加到复选框中，要获取与该复选框相关的单个值，我在单击复选框时获取单个值，但复选框未选中需要帮助谢谢Matt占用您的时间，但我根据我的要求以不同的方式解决了问题