KnockoutJS - checked 绑定

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

语法

checked: <binding-value>

参数

主要参数

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

附加参数

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

例如，查看以下代码片段，其中当选中相应的复选框时，项目对象本身被包含在 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 参数是可观察值，则绑定将在基础值发生变化时更新 checked 模型属性。对于单选按钮，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>