淘汰js按钮单击选中所有复选框

Question

我正在使用 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)
            });
    }
})
});

Answer 1

在你的函数范围开始之前你不能定义一个变量，你把 { 放在哪里。下面的减速是错误的

function userViewModel()
  var self=this;
     {

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

示例：https://jsfiddle.net/kyr6w2x3/103/

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>

JS：

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();