Knockout js checkbox not checked when setting selected value in viewmodel

Sarah

My problem is that when I set the value of the selected checkbox through the viewmodel, the checkbox is not selected until I click another checkbox.

HTML：

<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '1', id: '1'}" /> 1
<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '2', id: '2'}" /> 2
<input type="checkbox" data-bind="checked: selectedTags, attr: {value: '3', id: '3'}" /> 3

<button data-bind="click: alertMe">Click Me</button>

JAVASCRIPT：

function ViewModel () {
    var self = this;
    
    self.selectedTags = ko.observableArray([]);

    // I added 1 to the selected tags array
    self.selectedTags().push('1');
    
    self.alertMe = function () {
        alert(self.selectedTags());
    };
}
nemesv

The correct way to add items to observableArrayis to call pushdirectly observableArray(this way, KO will be notified that your array has changed):

self.selectedTags.push('1'); //no () after selectedTags

It doesn't solve your problem by itself, because you're setting checkboxes valuewith attrbindings , and Knockout (prior to version 3.0) fires the bindings sequentially. So the checkedbinding will be executed first, the binding will not find the value and therefore cannot set your checkbox.

You can upgrade to Knockout 3.0 to fix this or change the order of bindings:

<input type="checkbox" 
       data-bind="attr: {value: '1', id: '1'}, checked: selectedTags" /> 1
<input type="checkbox" 
       data-bind="attr: {value: '2', id: '2'}, checked: selectedTags" /> 2
<input type="checkbox" 
       data-bind="attr: {value: '3', id: '3'}, checked: selectedTags" /> 3

Demo JSFiddle .

Related

Knockout JS checkbox checked binding

gth685f In knockout js, I am trying to perform a foreach on an array of data to display checkboxes. The problem I'm having is that the selected databinding doesn't seem to work until I interact with one of the boxes. For example, below I will generate 5 textbo

Knockout JS checkbox checked binding

gth685f In knockout js, I am trying to perform a foreach on an array of data to display checkboxes. The problem I'm having is that the selected databinding doesn't seem to work until I interact with one of the boxes. For example, below I will generate 5 textbo

How to change checkbox checked value in Knockout.js?

stereotaxic I want to change the value of the checkbox via jQuery, but the knockout binding doesn't work var viewModel = { myValue: ko.observable(true) }; ko.applyBindings(viewModel); $(':checkbox').prop({checked: false}).change(); http://jsfiddle.net/s

Knockout.js checkbox checked and click event

David Reid We are trying to implement checkboxes and lists with the following functionality: Clicking the checkbox will clear the array (if there are items in it), or add a new item (if there are none). When the delete button is clicked, an item is removed fro

Update checkbox with knockout and store selected value

manufan22122 I have a list of checkboxes and I want to be able to select and deselect all options and store the selected value in a cull array. Here is my HTML <a><span data-bind="click: selectAllUsers">SELECT ALL</span></a> <a><span data-bind="click: deselect

Knockout.js track selected checkbox

Rob Horton I have an html grid that returns one checkbox per row. Currently, I have these bound to my view model. I've got enough of grabbing the id of the row I want to check, but I'm not sure how to make Knockout give me a list of all checked rows and the co

See checkbox value when checked

Patrick If I have a list of checkboxes and they have the same name and different values. I want to write values from checkboxes that I have checked in real time in a new column. How can I do this? <div id="checkboxes"> <input type="checkbox" name="prod" value=

See checkbox value when checked

Patrick If I have a list of checkboxes and they have the same name and different values. I want to write values from checkboxes that I have checked in real time in a new column. How can I do this? <div id="checkboxes"> <input type="checkbox" name="prod" value=

Rails jQuery: Checkbox checked when an item is selected

gothic I'm trying to make a script that will work when something is selected, a checkbox will be checked and some will be disabled. Here is my code: <script type="text/javascript"> $(document).ready(function () { $('#myselect').change(function(){

Rails jQuery: Checkbox checked when an item is selected

gothic I'm trying to make a script that will work when something is selected, a checkbox will be checked and some will be disabled. Here is my code: <script type="text/javascript"> $(document).ready(function () { $('#myselect').change(function(){

Set checkbox value when checkbox is not checked

Biplov How can I achieve this using javascript or anything. My checkboxes look like this <th>{{ render_field_with_errors(form.polycarbonate_r, value="Polycarbonate", type="checkbox") }}</th> It's a built-in checkbox in the form of flask WTF. I want to be able

Angular: Get value of checkbox when checkbox is checked

Dahal Bag Here is my point, I want to get values like diadia or htn because I want to store them in string format. But the way I get it now in an object format font(color ='green', size ='3') strong Past History .checkbox

Angular: Get value of checkbox when checkbox is checked

Dahal Bag Here is my point, I want to get values like diadia or htn because I want to store them in string format. But the way I get it now in an object format font(color ='green', size ='3') strong Past History .checkbox

Angular: Get value of checkbox when checkbox is checked

Dahal Bag Here is my point, I want to get values like diadia or htn because I want to store them in string format. But the way I get it now in an object format font(color ='green', size ='3') strong Past History .checkbox

Knockout js pass textbox value to ViewModel

Kitty Sarvaj I have model class and viewmodel and I am creating an instance of the model class. When I enter some text inside the input tag, the value won't go into the viewmodel, and when I click the save button, I get an empty array. HTML <div id="UserID">

Open new tab on UserControl when checkbox on ViewModel is checked

Chia I'm trying to make a program in MVVM that can read an Excel file and generate the content into a Word file. Now I'm stuck on creating new s on Taba UserControl, every time someone chooses to create a Word file on the checkbox: It should spawn a new tab on

Knockout Js radio binding not setting value

Callum Linington Here's the documentation I'm looking at: Example of adding a radio button it says: And only if the parameter value is equal to the value attribute of the radio button node, KO will set the element to check What I did here: jsfiddle self.radioV

Knockout Js radio binding not setting value

Callum Linington Here's the documentation I'm looking at: Example of adding a radio button it says: And only if the parameter value is equal to the value attribute of the radio button node, KO will set the element to check What I did here: jsfiddle self.radioV

When the checkbox checked value is true, no text is displayed

奥罕（Orhan）： Hi, I can't see the text when the check value is true. How to open the default region? important! When the checkbox is checked, the text must be visible! <!DOCTYPE html> <html> <body> <p>Display some text when the checkbox is checked:</p> <label f

When the checkbox checked value is true, no text is displayed

奥罕（Orhan）： Hi, I can't see the text when the check value is true. How to open the default region? important! When the checkbox is checked, the text must be visible! <!DOCTYPE html> <html> <body> <p>Display some text when the checkbox is checked:</p> <label f

Type: Add a value when a checkbox is checked

Anke Van Reeth So I use Keyup to count the total number of input fields. So far, so good. But now I want to do this: if the #a checkbox is checked, add 12 to the total. If not, add 0. I am based on this code : http://jsfiddle.net/5xzSy/1/ $(document).keyup(fun

When the checkbox checked value is true, no text is displayed

奥罕（Orhan）： Hi, I can't see the text when the check value is true. How to open the default region? important! When the checkbox is checked, the text must be visible! <!DOCTYPE html> <html> <body> <p>Display some text when the checkbox is checked:</p> <label f

Get gridview row value when checkbox is checked

User 3660473 I have a grid view with checkboxes to select rows. I need to put the row value into a string/session when the checkbox is checked. Below is the code <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRow