How to check/uncheck HTML CheckBoxFor with javascript/jQuery

Question

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:

$("#idSelector").prop('checked', true);
$("#idSelector").prop('checked', false);

However, since the razor html helper adds a second input element to the mix, this creates complications.

$(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);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 50px;">
  <div style="clear: both;"></div>
  <div style="margin: 25px; margin-top: 15px; margin-bottom: 10px;">
    <div id="CheckBoxRow" style="border-bottom: 1px solid lightgrey; padding-bottom: 10px;">
      <label>
        <input id="holeSizes" name="holeSizes" type="radio" value="4" data-bind="checked:holeSizes">Choice Group One</label>
      <div id="checkBoxArray" style="min-height: 18px;">
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="one" name="one" type="checkbox" value="true" data-bind="checked:one">
          <input name="one" type="hidden" value="false" data-bind="value:one">One</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="two" name="two" type="checkbox" value="true" data-bind="checked:two">
          <input name="two" type="hidden" value="false" data-bind="value:two">Two</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="three" name="three" type="checkbox" value="true" data-bind="checked:three">
          <input name="three" type="hidden" value="true" data-bind="value:three">Three</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="four" name="four" type="checkbox" value="true" data-bind="checked:four">
          <input name="four" type="hidden" value="false" data-bind="value:four">Four</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="five" name="five" type="checkbox" value="true" data-bind="checked:five">
          <input name="five" type="hidden" value="false" data-bind="value:five">Five</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="six" name="six" type="checkbox" value="true" data-bind="checked:six">
          <input name="six" type="hidden" value="false" data-bind="value:six">Six</div>
        <div>
          <input class="Checkbox1" data-val="true" data-val-required="required." id="seven" name="seven" type="checkbox" value="true" data-bind="checked:seven">
          <input name="seven" type="hidden" value="false" data-bind="value:seven">Seven</div>
      </div>
    </div>
  </div>
</div>

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.

What code do I need to use to change both the visual checkbox and the hidden value?

Update

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.

data-bind="checked:one"

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.

Is there an easy way to change the value of a data-bound model?

@Lexib0y This is decidedly NOT a duplicate since I explicitly said I'm already using the answers in that question and they don't work for the reasons I specified. — user3738893, Feb 12 '15 at 22:44
What complications? The hidden input should not be changed. The checkbox has a value of `true` and the corresponding hidden input has a value of `false`. If the checkbox is checked, it will post back `true, false` and the ModelBinder sets the property value to true (the second value is ignored). If unchecked, it will post back `false` (unchecked checkboxes do not post back) and the property value is set to `false` — , Feb 12 '15 at 23:21
http://stackoverflow.com/questions/5462967/razor-viewengine-html-checkbox-method-creates-a-hidden-input-why — billyonecan, Feb 13 '15 at 12:29
@StephenMuecke then that may be part of the problem. When I manually click on the checkbox, the value of the hidden input changes to true when checked and false when not checked. The value of the first input is always true. So this is incorrect behavior? — user3738893, Feb 13 '15 at 14:35
No its not. There must be other scripts on you page causing that behavior. If you look at the html generated, you will see that the associated hidden input does not even have a `id` attribute so `("#idSelector").prop('checked', true);` couldn't change anything, and in any case `.prop('checked', true);` only changes the visual state, it does not change the `value` attribute which is what posts back — , Feb 13 '15 at 21:56

score 1 · Answer 1 · answered Feb 13 '15 at 12:25

1

If your code looks like:

@using(Html.BeginForm......
{
...
@Html.LabelFor(s=>s.idSelector, "idSelector")
@Html.CheckBoxFor(s=>s.idSelector)
...
}

only what you have to do for set checkbox as 'checked' is:

$("#idSelector").prop('checked', true);

answered Feb 13 '15 at 12:25

listeeeek

46
6

score 1 · Answer 2 · answered Jun 22 '16 at 10:43

1

This code is working for to change the checked status of checkbox to false if true.

if ($("#cbName").is(":checked")) {
            $("#cbName").click();
        }

answered Jun 22 '16 at 10:43

RAVI VAGHELA

877
1
10
12

score 0 · Answer 3 · answered Apr 15 '15 at 21:46

While this may not help the poster due to the age of this question, I hope this will help any that find this searching like I did, specifically for the Kendo().CheckBoxFor while editing a grid item. I was able to check/uncheck the way listeeeek mentioned but due to the under the hood stuff in kendo, the model it was bound to was not updating. I added the second line here to update the model

$("#CHECKBOXNAME").prop('checked', desiredBool);
$('#GRIDNAME').data().kendoGrid.editable.options.model.CHECKBOXITEM = desiredBool;

Hope this helps.

How to check/uncheck HTML CheckBoxFor with javascript/jQuery

3 Answers3