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

列印頁面