KnockoutJS - checked 绑定

此绑定用于在可选中表单元素和 ViewModel 属性之间创建链接。通常这些表单元素包括复选框和单选按钮。这也是一种双向绑定方法，其中用户选中表单控件的那一刻，相应的 ViewModel 属性就会发生变化，反之亦然。

语法

checked: <binding-value>

参数

主要参数

可选中元素的状态设置为参数值。之前的值将被覆盖。
复选框 - 当 ViewModel 参数值为 true 时，DOM 元素处于选中状态，如果为 false 则未选中。非零数字、非空字符串和非空对象被解释为 true 布尔值，而 undefined、零和空字符串被视为 false 值。
单选按钮 - 单选按钮以字符串格式工作。这意味着，只有当参数值与单选按钮节点的值完全匹配时，KnockoutJS 才会设置元素的值。当用户选择新的单选按钮值时，属性会设置为新值。
如果参数是可观察对象，则元素值会在底层可观察对象更改时被选中或取消选中。如果未使用可观察对象，则元素只处理一次。

其他参数

checkedValue - checkedValue 选项用于保存 checkedbinding 使用的值，而不是元素的 value 属性。当选中值不是字符串（例如整数或对象）时，这非常有用。

例如，请查看以下代码片段，其中当选中相应的复选框时，item 对象本身会被包含到 chosenValue 数组中。

<!-- ko foreach: items -->
   <input type = "checkbox" data-bind = "checkedValue: $data, 
      checked: $root.chosenValue" />
   <span data-bind = "text: itemName"></span>
<!-- /ko -->

<script type = "text/javascript">
   var viewModel = {
      
      itemsToBeSeen: ko.observableArray ([
         { itemName: 'Item Number One' },
         { itemName: 'Item Number Two' }
      ]),
      
      chosenValue: ko.observableArray()
   };
</script>

如果 checkedValue 参数是可观察值，则绑定将在底层值更改时更新选中的模型属性。对于单选按钮，KO 仅更新模型值。对于复选框，它将用新值替换旧值。

示例

让我们来看下面的示例，它演示了复选框控件的使用。

在线演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Checked checkbox Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> The required files are installed. 
      Please check below to complete installation</p>
      
      <p><input type = "checkbox" data-bind = "checked: agreeFlag" />
      I agree to all terms and conditions applied.</p>
      
      <button data-bind = "enable: agreeFlag">Finish</button>

      <script type = "text/javascript">
         function ViewModel() {
            this.agreeFlag =  ko.observable(false)       // Initially unchecked
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看以上代码的工作原理：

将以上代码保存在名为 checked-checkbox-bind.htm 的文件中。
在浏览器中打开此 HTML 文件。
只有当用户同意条款和条件时，完成按钮才会激活。

示例

让我们看下面的示例，它演示了单选按钮控件的使用：

在线演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Checked Radio Button Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p> Select gender type from below:</p>
      <div><input type = "radio" name = "gender" value = "Male" 
         data-bind = "checked: checkGender" /> Male</div>
         
      <div><input type = "radio" name = "gender" value = "Female" 
         data-bind = "checked: checkGender" /> Female</div>
         
      <div><p>You have selected: <span 
         data-bind = "text:checkGender "></span></p></div>

      <script type = "text/javascript">
         function ViewModel () {
            checkGender =  ko.observable("Male")     // Initially male is selected
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看以上代码的工作原理：

将以上代码保存在名为 checked-radio-button-bind.htm 的文件中。
在浏览器中打开此 HTML 文件。
单选按钮保存性别类型值。

knockoutjs_declarative_bindings.htm

打印页面