入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

高级应用

插件

更多信息

"checked" 绑定

目的

checked 绑定是关联到checkable的form表单控件到view model上 - 例如checkbox () 或者radio button () 。

The checked binding links a checkable form control — i.e., a checkbox () or a radio button () — with a property on your view model.

当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，如果view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。

When the user checks the associated form control, this updates the value on your view model. Likewise, when you update the value in your view model, this checks or unchecks the form control on screen.

注：对text box，drop-down list和所有non-checkable的form表单控件，用 value 绑定 来读取和写入是该元素的值，而不是 checked 绑定。

Note: For text boxes, drop-down lists, and all non-checkable form controls, use the value binding to read and write the element’s value, not the checked binding.

checkbox 例子

  1. <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
  3. <script type="text/javascript">
  4.     var viewModel = {
  5.         wantsSpam: ko.observable(true) // Initially checked
  6.     };
  8.     // ... then later ...
  9.     viewModel.wantsSpam(false); // The checkbox becomes unchecked
  10. </script>

Checkbox关联到数组 例子

  1. <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
  2. <div data-bind="visible: wantsSpam">
  3.     Preferred flavors of spam:
  4.     <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div>
  5.     <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div>
  6.     <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div>
  7. </div>
  9. <script type="text/javascript">
  10.     var viewModel = {
  11.         wantsSpam: ko.observable(true),
  12.         spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes
  13.     };
  15.     // ... then later ...
  16.     viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox
  17. </script>

添加radio button 例子

  1. <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
  2. <div data-bind="visible: wantsSpam">
  3.     Preferred flavor of spam:
  4.     <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
  5.     <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
  6.     <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
  7. </div>
  9. <script type="text/javascript">
  10.     var viewModel = {
  11.         wantsSpam: ko.observable(true),
  12.         spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
  13.     };
  15.     // ... then later ...
  16.     viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
  17. </script>

参数

  • 主参数

KO会设置元素的checked状态匹配到你的参数上，之前的值将被覆盖。对参数的解析取决于你元素的类型：

KO sets the element’s checked state to match your parameter value. Any previous checked state will be overwritten. The way your parameter is interpreted depends on what type of element you’re binding to:

  • 对于 checkboxes，当参数为 true 的时候，KO会设置元素的状态为 checked ，当参数为 false 的时候，KO会设置元素的状态为 uncheckedd。如果你传的参数不是布尔值，那KO将会解析成布尔值。也就是说非0值和非 null 对象，非空字符串将被解析成 true，其它值都被解析成 false。

For checkboxes, KO will set the element to be checked when the parameter value is true, and unchecked when it is false. If you give a value that isn’t actually boolean, it will be interpreted loosely. This means that nonzero numbers and non-null objects and non-empty strings will all be interpreted as true, whereas zero, null, undefined, and empty strings will be interpreted as false.

当用户check或者uncheck这个checkbox的时候，KO会将view model的属性值相应地设置为 true 或者 false 。

When the user checks or unchecks the checkbox, KO will set your model property to true or false accordingly.

一个特殊情况是参数是一个 array，如果元素的值存在于数组，KO就会将元素设置为 checked ，如果数组里不存在，就设置为 unchecked 。

Special consideration is given if your parameter resolves to an array. In this case, KO will set the element to be checked if the value matches an item in the array, and unchecked if it is not contained in the array.

如果用户对checkbox进行check或uncheck，KO就会将元素的值添加数组或者从数组里删除。

When the user checks or unchecks the checkbox, KO will add or remove the value from the array accordingly.

  • 对于 radio buttons，KO只有当参数值等于radio button value 属性值的时候才设置元素为 checked 。所以参数应是字符串。在上面的例子里只有当view model中 spamFlavor 的 value="almond" 等于 "almond" 的时候，该radio button才会设置为checked。

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string. In the previous example, the radio button with value="almond" was checked only when the view model’s spamFlavor property was equal to "almond".

当用户将一个radio button选择上的时候 is selected，KO会将该元素的 value 属性值更新到view model属性里。上面的例子，当点击 value="cherry" 的选项上， viewModel.spamFlavor r的值将被设置为 "cherry".

When the user changes which radio button is selected, KO will set your model property to equal the value attribute of the selected radio button. In the preceding example, clicking on the radio button with value="cherry" would set viewModel.spamFlavor to be "cherry".

当然，最有用的是设置一组radio button元素对应到一个的view model 属性。确保一次只能选择一个radio button需要将他们的 name 属性名都设置成一样的值（例如上个例子的 flavorGroup 值）。这样的话，一次就只能选择一个了。

Of course, this is most useful when you have multiple radio button elements bound to a single model property. To ensure that only one of those radio buttons can be checked at any one time, you should set all their name attributes to an arbitrary common value (e.g., the value flavorGroup in the preceding example) - doing this puts them into a group where only one can be selected.

如果参数是监控属性observable的，那元素的checked状态将根据参数值的变化而更新，如果不是，那元素的value值将只设置一次并且以后不在更新。

If your parameter is an observable value, the binding will update the element’s checked state whenever the value changes. If the parameter isn’t observable, it will only set the element’s checked state once and will not update it again later.

  • 其它参数

无

依赖性

除KO核心类库外，无依赖。

(c) knockoutjs.com