jquery - 2 个复选框，当我取消选中其中一个时，我希望选中另一个

Question

我可以让它工作，但它只能工作一次。我选中第一个框，然后取消选中它，然后选中另一个框，但是当我再次选中并取消选中第一个框时，它不起作用。

这基本上就像一个单选按钮，但第二个复选框将被隐藏，因此他们只需要选中或取消选中第一个框。

这是我的代码:

$('input').on('change', function() {
  $(this).siblings().attr('checked', false);
  if ($(this).prop('checked') == false) {
    $(this).siblings().attr('checked', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />

Answer 1

您的情况的问题是您正在使用 .attr() 方法来更改同级复选框元素的 checked 属性。由于您要更改属性，因此它只会起作用一次。如果将其更改为 .prop()，它应该按预期工作。

更简单的方法是根据当前复选框是否选中来切换同级元素的 checked 属性。您可以在您的情况下简单地使用 !this.checked :

$('input').on('change', function() {
  $(this).siblings().prop('checked', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />