knockout js button click select all the checkbox

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

Answer 2

Вы должны добавить новый метод к вашему userViewModel:

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

Answer 3

@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

Working Fiddle