如何切换 icheck 复选框答案

【问题标题】：How to toggle icheck checkboxes如何切换 icheck 复选框
【发布时间】：2017-05-23 23:09:37
【问题描述】：

我使用插件 icheck (http://icheck.fronteed.com) 有 2 个复选框（是 / 否），我希望在选中 Yes 时 No 将被取消选中，反之亦然。

  <label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
  <label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>

Javascript

    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green'
    });

【问题讨论】：

这正是我们有单选按钮的原因。为什么不使用它们？
@Dekel 注释是正确的，但是你也可以使用 jQuery toggle - api.jquery.com/toggle
你好 Dekel，我不使用单选按钮，因为我需要在某些情况下将复选框设为强制性，而在其他情况下则不需要。
这种切换行为在这些情况下没有意义。您应该在适用此切换行为的地方使用单选按钮。

标签： javascript jquery checkbox icheck

【解决方案1】：

添加事件监听器并监听change 事件。然后在事件触发时运行的回调中，将属性反对复选框更改为与事件值相反。

var firstCheckbox = $('#myicheckboxid1');
var secondCheckbox = $('#myicheckboxid2');

firstCheckbox.prop('checked', true); // default
// you could also use iChecked to do this but it's fine to set with `prop`
// firstCheckbox.iCheck('check');

firstCheckbox.on('change', function(event) {
  secondCheckbox.prop('checked', !event.target.checked);
});

secondCheckbox.on('change', function(event) {
  firstCheckbox.prop('checked', !event.target.checked);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>

但是说真的，你应该考虑一个单选按钮:)

【讨论】：

里科，非常感谢。 5 星。