title: Why is KnockoutJs unaware of change to radioButton made by JQuery?
body: <p><em>Update</em>:  I posted my code solution as an answer down below, which could help if someone wants to see a complete (and fairly simple) example of a KnockoutJs custom binding.</p>
  
  <hr>
  
  <p><strong>Problem</strong>:<br>
  When I use jQuery to set the checked status of a radio button... then it seems as if my KnockoutJs viewmodel does not track this change!</p>
  
  <p><strong>Scenario</strong>:<br>
  I have multiple large DIVs, and each DIV wraps one radio button.  (This makes it easier for users to click the radio button by having a larger area to click on.)  When the user clicks somewhere in the div, I want to check the radio button for them.... which works just fine.  However, when attempting to read the value from the viewModel property bound to this radio button.... it has not been updated.  :-(</p>
  
  <p>The only time the viewModel is updated is if I click <em>DIRECTLY</em> on the radio button inside the div.  If I just click somewhere inside the div (which executes my jQuery), then.... even though the radio visibly becomes checked.... the knockoutjs viewModel property has not been updated with a new value.</p>
  
  <p><strong>Question:</strong>
  Can someone please tell me how to change the checked status of a radio button using jQuery and have KnockoutJs play nicely and be updated as well?</p>
  
  <p>Code is below, and here is jsFiddle:  <a href="http://jsfiddle.net/CkEMa/67/" rel="nofollow">http://jsfiddle.net/CkEMa/67/</a></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function ()
      {
          var self = this;
  
          function ViewModel()
          {
              this.HourlyOrSalary = ko.observable("");
          }
          viewModel = new ViewModel();
          ko.applyBindings(viewModel, document.getElementById('divKnockout'));
  
          // Click event for DIV around radio button
          $('.divRadioWrapper').click(function ()
          {
              var radio = $(this).find('input[type="radio"]');
              radio.prop('checked', true);
  
          });
  
          // Just for testing...
          $('#testButton').click(function ()
          {
              var viewModelVal = viewModel.HourlyOrSalary();
              alert('Value --&gt; ' + viewModelVal);
          });
  
      });
  &lt;/script&gt;
  
  &lt;style&gt;
      .divRadioWrapper {
          background-color: #dde9f5;   /*#d8f5f0;*/  /* #dcfbff; */
          width: 75px; 
          padding: 5px 10px; 
          border: 1px solid lightgray;
          cursor: pointer;
          margin-bottom: 10px;
      }
  &lt;/style&gt;
  
  &lt;div id="divKnockout"&gt;
      &lt;div class="divRadioWrapper"&gt;
          &lt;input type="radio" name="formType" value="hourly" data-bind="checked: HourlyOrSalary"
          /&gt;Hourly&lt;/div&gt;
      &lt;div class="divRadioWrapper"&gt;
          &lt;input type="radio" name="formType" value="salary" data-bind="checked: HourlyOrSalary"
          /&gt;Salary&lt;/div&gt;
      &lt;br /&gt;
  
      &lt;input type="button" id="testButton" value="Display viewModel data" /&gt;    
  &lt;/div&gt;
  </code></pre>