Knockoutjs--checkbox Select All

First, preface

The landlord freshman party, is a small rookie. Previous projects are done with third-party controls, and recently began to learn to use MVC, Easyui and Knockoutjs, and so on, maybe some of the following places are not good, please forgive us.

second, the content

First of all we need to understand the basic Knockoutjs binding, this I will not say that you can see Uncle Tom and Y-z-f blog.

I am a new table, the main content is as follows:

<TableAlign= "Center">    <thead>        <TR>            <thwidth= "3%"></th>            <thwidth= "20%">News Name</th>            <thwidth= "20%">Author</th>        </TR>    </thead>    <tbodyData-bind= "Foreach:news"><!--Foreach:news is used to get array data -        <TR>            <TD>                <inputtype= "checkbox"Data-bind= "Checked:checks"><!--Checked binding checkbox -            </TD>            <TDData-bind= "Text:title"></TD><!--The text binding displays the corresponding title value -            <TDData-bind= "Text:usersname"></TD>        </TR>    </tbody>    <TR>        <TD>            <inputtype= "checkbox"Data-bind= "Checked:selectall"></TD>        <TD>Select All</TD>        <TD></TD>        <TD></TD>        <TD></TD>        <TD></TD>    </TR></Table>

Note: For the text Box,drop-down list and all non-checkable form controls, the value binding is used to read and write the values of the element, not the checked binding. (in the case of a manual)

When the binding is finished, it is done with the following code:

$(function () {        varViewModel ={selectall:ko.observable (false), News:ko.observableArray ([{checks:false, title: ' This is Title ', Usersname: ' CCCCCC '}, {checks:false, Title: ' Hahahhahaha ', usersname: ' Ssssss ' }                   ]           )        }; //MonitorViewModel.selectall.subscribe (function(Nvalue) {//Subscribe is the Monitor property display subscription, through Nvalue to determine whether the selection is selected, or not selected            if(Nvalue) {//If you select                vars =viewmodel.news ();                Viewmodel.news ([]);  for(vari = 0; i < s.length; i++) {s[i].checks=true;//set the check in the list to True} viewmodel.news (s); } Else{//If not selected                vars =viewmodel.news ();                Viewmodel.news ([]);  for(vari = 0; i < s.length; i++) {s[i].checks=false;//set the check in the list to False} viewmodel.news (s);        }        });    Ko.applybindings (ViewModel); });

When the display of the full selection to be empty, so we can directly set false

Observablearray is an array, so the top is bound with foreach

Note: The name of the above binding must be unified with the bottom, otherwise it will not show

The results are as follows:

Knockoutjs--checkbox Select All