Question

我已经查看了问题的所有其他答案＆＃34;如何使用Javascript / jQuery检查/取消选中复选框＆＃34;他们似乎在说：

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

但是，由于razor html帮助器在混音中添加了第二个输入元素，因此会产生复杂性。

＆＃13;

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

＆＃13;

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

＆＃13;

我已经使用此代码根据单击的单选按钮更改复选框选择状态，复选框显示检查，就好像它们已被选中一样，但隐藏输入框的基础值未更改以反映此情况。 / p>

我需要使用哪些代码来更改可视复选框和隐藏值？

更新

我差点搞清楚了。的种类。这些复选框位于Kendo模板中，似乎是自动将Knockout绑定应用于每个复选框。

data-bind="checked:one"

因此，改变盒子的视觉外观和隐藏输入的值本身仍然不能完全发挥作用。我在另一行添加了更改数据绑定的值，但这仍然是一个太短的步骤。我需要更改knockout绑定的模型的值。

是否有一种简单的方法来更改数据绑定模型的值？

Answer 1

如果你的代码如下：

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

只有你需要做的设置复选框'已检查'是：

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

Answer 2

此代码用于将复选框的已检查状态更改为false（如果为true）。

  <div ng-controller="agenciesController">
    <ul ng-repeat="agencyName in agenciesArray">
      <li>{{agencyName}}</li>
    </ul>
  </div>

Answer 3

虽然由于这个问题的年龄，这可能对海报没有帮助，但我希望这会帮助任何找到这样的搜索，就像我做的那样，特别是Kendo（）。CheckBoxFor在编辑网格项时。我能够检查/取消选中listeeeek提到的方式，但由于在剑道中的引擎盖内容，它所绑定的模型没有更新。我在这里添加了第二行来更新模型

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

希望这有帮助。

如何使用javascript / jQuery检查/取消选中HTML CheckBoxFor

3 个答案: