如何切换 icheck 复选框

Question

我有 2 个带有插件 icheck (http://icheck.fronteed.com) 的复选框（是/否），我想要是被选中没有将被取消选中，反之亦然。

  <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'
    });

Answer 1

添加事件侦听器并侦听 change 事件。然后在事件触发时运行的回调中，将属性 opposing checkbox 更改为事件值的对立面。

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>

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

如何切换 icheck 复选框

How to toggle icheck checkboxes

javascript

jquery

checkbox

icheck