Nikil Nikil - 1 month ago 31
Javascript Question

knockout js button click select all the checkbox

I am using Knockout js for binding, i am binding list of data with checkbox,the data i am fetching and binding to list item including checkbox to all item,now i need to create new button name "select-all" and when i click that button i need to select all the checkbox and i need to get all data from selected checkbox how to achieve this need help..

<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

You cannot define a variable before your function scope begins where you put { . Below deceleration is WRONG

function userViewModel()
  var self=this;
     {

Based on What I see from your code I'll show you how to approach such a thing.

Example: https://jsfiddle.net/kyr6w2x3/102/

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