复选框像单选按钮一样工作，但如何取消选中？

【问题标题】：Checkboxes working like radio button, but how to uncheck?复选框像单选按钮一样工作，但如何取消选中？
【发布时间】：2020-11-22 10:47:40
【问题描述】：

<div id="checkboxes">
    <label><input type="checkbox" name="box1" value="orange" class="btn"> Oranges</label>
    <label><input type="checkbox" name="box2" value="apple" class="btn"> Apples</label>
</div>
<script type="text/javascript">
jQuery(function()
{
    jQuery(document).on("change", ".btn", function()
    {
        jQuery(".btn").prop("checked", false);

        if (! this.checked)
            jQuery(this).prop("checked", true);
    });
});
</script>

这非常适合使复选框的行为类似于单选按钮，但“取消选中”不起作用。如何让用户也可以取消勾选？

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

默认情况下您会获得该行为。在这种情况下，所有 JS 需要做的就是取消选中每个 .btn 元素，除了引发事件的元素：

jQuery($ => {
  $(document).on("change", ".btn", function() {
    $(".btn").not(this).prop("checked", false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
  <label><input type="checkbox" name="box1" value="orange" class="btn"> Oranges</label>
  <label><input type="checkbox" name="box2" value="apple" class="btn"> Apples</label>
</div>

【讨论】：