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
– user3738893, Commented Feb 12, 2015 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 — user3559349
– user3559349, Commented Feb 12, 2015 at 23:21
@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
– user3738893, Commented Feb 13, 2015 at 14:35

listeeeek · Accepted Answer · 2015-02-13 12:25:21Z

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, 2015 at 12:25

listeeeek

466 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RAVI VAGHELA · Accepted Answer · 2016-06-22 10:43:54Z

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, 2016 at 10:43

RAVI VAGHELA

8971 gold badge10 silver badges12 bronze badges

Comments

Contristo · Accepted Answer · 2015-04-15 21:46:38Z

0

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.

answered Apr 15, 2015 at 21:46

Contristo

3351 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to check/uncheck HTML CheckBoxFor with javascript/jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related