敲除js按钮点击全选复选框

knockout js button click select all the checkbox

本文关键字：全选 复选框 js 按钮 敲除      更新时间：2023-09-26

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

在函数范围从放置{的位置开始之前，不能定义变量。低于减速度是错误的

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

您需要向userViewModel:添加一个新方法

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

@haim770正确地指出，您必须循环元素并设置item.Selected(true)。现在的问题是：

<input  type="checkbox" data-bind="value:userId(),click:$root.toggle" />
  • 首先，复选框被映射到userId而不是Selected
  • 其次，复选框并没有值绑定。它具有checked绑定。所以应该是：

<input type="checkbox" data-bind="checked:$data.Selected,click:$root.toggle" />

此外，您应该避免使用$root。您可以将其替换为$parent.toggle

工作Fiddle

相关文章：