title: How to check/uncheck HTML CheckBoxFor with javascript/jQuery
body: <p>I've looked at all the other answers to the question "How to check/uncheck a checkbox with Javascript/jQuery" and they seem to say to use:</p>
  
  <pre><code>$("#idSelector").prop('checked', true);
  $("#idSelector").prop('checked', false);
  </code></pre>
  
  <p>However, since the razor html helper adds a second input element to the mix, this creates complications.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", "input[type='radio']", function() {
    $("input[type='radio']").each(function() {
      var that = this;
      $(this).parent().siblings("#checkBoxArray").find(":checkbox").each(function(i, item) {
        $(item).prop('checked', that.checked);
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="margin-bottom: 50px;"&gt;
    &lt;div style="clear: both;"&gt;&lt;/div&gt;
    &lt;div style="margin: 25px; margin-top: 15px; margin-bottom: 10px;"&gt;
      &lt;div id="CheckBoxRow" style="border-bottom: 1px solid lightgrey; padding-bottom: 10px;"&gt;
        &lt;label&gt;
          &lt;input id="holeSizes" name="holeSizes" type="radio" value="4" data-bind="checked:holeSizes"&gt;Choice Group One&lt;/label&gt;
        &lt;div id="checkBoxArray" style="min-height: 18px;"&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="one" name="one" type="checkbox" value="true" data-bind="checked:one"&gt;
            &lt;input name="one" type="hidden" value="false" data-bind="value:one"&gt;One&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="two" name="two" type="checkbox" value="true" data-bind="checked:two"&gt;
            &lt;input name="two" type="hidden" value="false" data-bind="value:two"&gt;Two&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="three" name="three" type="checkbox" value="true" data-bind="checked:three"&gt;
            &lt;input name="three" type="hidden" value="true" data-bind="value:three"&gt;Three&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="four" name="four" type="checkbox" value="true" data-bind="checked:four"&gt;
            &lt;input name="four" type="hidden" value="false" data-bind="value:four"&gt;Four&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="five" name="five" type="checkbox" value="true" data-bind="checked:five"&gt;
            &lt;input name="five" type="hidden" value="false" data-bind="value:five"&gt;Five&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="six" name="six" type="checkbox" value="true" data-bind="checked:six"&gt;
            &lt;input name="six" type="hidden" value="false" data-bind="value:six"&gt;Six&lt;/div&gt;
          &lt;div&gt;
            &lt;input class="Checkbox1" data-val="true" data-val-required="required." id="seven" name="seven" type="checkbox" value="true" data-bind="checked:seven"&gt;
            &lt;input name="seven" type="hidden" value="false" data-bind="value:seven"&gt;Seven&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have used this code to change the checkbox selection status based on which radio button is clicked and the checkboxes show a check as if they were selected, but the underlying value of the hidden input box is not changed to reflect this.</p>
  
  <p><strong>What code do I need to use to change both the visual checkbox and the hidden value?</strong></p>
  
  <p><strong>Update</strong></p>
  
  <p>I've almost got it figured out. Kind of. These checkboxes are in a Kendo template which seems to be automatically applying a Knockout binding to each checkbox. </p>
  
  <pre><code>data-bind="checked:one"
  </code></pre>
  
  <p>So changing the visual appearance of the box and the value of the hidden input by itself still isn't working completely. I added in another line to change the value of the data-binding, but this is still one step too short. I need to change the value of the model that the knockout binds to.</p>
  
  <p>Is there an easy way to change the value of a data-bound model?</p>