Question

我有两个带有插件icheck（http://icheck.fronteed.com）的复选框（是/否），我希望选中是 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'
    });

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

但严重的是，你应该考虑一个单选按钮：）

如何切换icheck复选框

1 个答案: