KnockoutJS - checked Binding

This binding is used to create a link between a checkable form element and ViewModel property. Mostly these form elements are inclusive of check box and radio buttons. This is also a two-way binding method wherein the moment the user checks form control, the respective ViewModel property is changed and vice versa.

Syntax

checked: <binding-value>

Parameters

Main Parameters

  • The checkable element's state is set to parameter value. Earlier the value will be overwritten.

  • Checkbox − The DOM element is checked when the ViewModel parameter value is true and is unchecked if it is false. Non-zero numbers, non-empty string, and non-null objects are interpreted at true Boolean value, whereas undefined, zero, and empty strings are considered as false value.

  • Radio Buttons − Radio buttons work in a form of a String format. Meaning, KnockoutJS will set the elements value only when the parameter value matches exactly with Radio Button node's value. The property is set with the new value the moment the user selects a new Radio button value.

  • If the parameter is an observable, then elements value is checked or unchecked as and when the underlying observable is changed. Element is processed only once if no observable is used.

Additional Parameters

  • checkedValue − checkedValue option is used to hold the value used by the checkedbinding instead of the element's value attribute. This is very useful when the checked value is something other than a String (like an Integer or an object).

For example, take a look at the following code snippet where the item object themselves are included into chosenValue array, when the respective checkboxes are checked.

<!-- 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>

If the checkedValue parameter is an Observable value, then the binding will update the checked model property whenever the underlying value changes. For radio buttons, KO will just update the model value. For checkboxes, it will replace the old value with the new value.

Example

Let us take a look at the following example which demonstrates the use of checkbox control.

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in checked-checkbox-bind.htm file.

  • Open this HTML file in a browser.

  • The Finish button is activated only when the user agrees with the terms and conditions.

Example

Let us see below example which demonstrates use of radio-button control −

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above code in checked-radio-button-bind.htm file.

  • Open this HTML file in a browser.

  • The radio button holds the gender type value.

knockoutjs_declarative_bindings.htm
Advertisements