javascript - 如果选中一个复选框，如何取消选中另一个复选框？

Question

我的计算器有一些问题，我有五个复选框(costOne、costTwo、costThree、costFour、costFive)

当我检查costOne时，costTwo应该关闭，但是如果我点击这个costTwo(然后它被关闭)，那么costOne 应关闭。

我的代码仅部分有效:当我单击costOne时，您将无法再单击costTwo(因为它被禁用)，但是当我单击costOne 它关闭，同时 costTwo 打开 - 这正是我想要的。

但我无法点击costTwo。

我需要第一个和第三个输入具有此链接的行为。

相关代码如下:

//calculator
var init = $('.switch input').on('click', function() {
    var value1 = 0;
    var value2 = 0;

    var costOne = $("#cost-one"),
        costTwo = $("#cost-three");


    if (costOne.is(':checked')) { 
        costOne.prop("checked", true);
        costTwo.prop("checked", false);
    } else { 
        costOne.prop("checked", false);
        costTwo.prop("checked", true);
    }

    init.filter(':checked').closest('tr').each(function() {
        value1 += (+$(this).find('span.cost-one').text());
        value2 += (+$(this).find('span.cost-two').text());
    });

    $('.counter-one span').eq(0).html(value1 + ' ');
    $('.counter-two span').eq(0).html(value2 + ' ');
});

Answer 1

您可以使用此代码(简化以关注问题):

$('input').on('change', function(){
    var id = $(this).prop('id');
    if (id == 'cost-one' || id == 'cost-three') {
        // Make sure the two have opposite values:
        var other = id == 'cost-one' ? 'cost-three' : 'cost-one';
        $('#'+other).prop("checked", !$(this).prop("checked"));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
One: <input type="checkbox" id="cost-one"><br>
Two: <input type="checkbox" id="cost-two"><br>
Three: <input type="checkbox" id="cost-three" checked><br>

other 变量将标识另一个复选框的 id:如果您点击 cost-one，它将引用 >成本三，反之亦然。

然后其他复选框将获得相反的选中状态。

为了保持一致，您还应该在页面加载时检查两者之一，因此我为第三个复选框添加了 checked 属性。

正如评论中所表达的，这种行为是单选按钮的标准行为。因此，除非您的库不支持相同的小部件查找，否则您可能更好地使用它们(对于那些链接的项目)。