独占输入复选框 - 通过单击当前选中的输入启用取消选中

Question

我做了一个 2 input checkboxes 的专属菜单：每个 input checkbox 对应一个不同的案例：(Player Vs Computer) 和 (Player1 Vs Player2)，每个案例都与 2 buttons 相关联（按我的意愿工作） )。

我的问题是我想添加一项功能，即通过单击当前复选框（已选中）来取消选中当前复选框。

目前，我必须直接点击另一个input checkbox 取消选中当前的；我想同时获得这两个功能。

这是处理这 2 个独占 input checkbox 的当前代码：

// Check input checked
 checkBoxState = $('#'+gameType+'').find('.game').prop('checked');
// Set oneButtonClicked to no for restore
 $('#formGame').prop('oneButtonClicked', 'no');
 // Handling input.game
 $('#'+gameType+'').find('.game').prop('checked', !checkBoxState);
 //$('#'+gameType+'').siblings().find('.game').prop('checked', checkBoxState);
 // Set pointer-events to all for formGame
 $('#formGame').css('pointer-events', 'all');
 // Handling button.btn
 $('#'+gameType+'').find('.btn').css('pointer-events', 'none');
 $('#'+gameType+'').siblings().find('.btn').css('pointer-events', 'all');
 $('#'+gameType+'').find('.btn').prop('disabled', checkBoxState);
 $('#'+gameType+'').siblings().find('.btn').prop('disabled', !checkBoxState);

gameType 是当前游戏类型（Player Vs Computer 或 Player1 Vs Player2）。

input.game代表输入框

button.btn代表每个ìnput.game可用的2个按钮。

如何添加此功能，即单击当前选中的复选框取消选中，或直接单击另一个复选框取消选中？

更新 1

单击复选框应自动将其否定设置为另一个复选框。

更新 2

我尝试通过简单地调整 @CodeAt30 给出的解决方案：

gameType = (gameType == 'PlayerVsComputer') ? 'Player1VsPlayer2' : 'PlayerVsComputer'; 
 $('#'+gameType).find('.game').prop('checked',  !$('#'+gameType).find('.game').prop('checked'));

此解决方案适用于取消选中当前复选框并检查其兄弟姐妹（）。

但是现在，我无法直接选择与 JS Fiddle 不同的另一个复选框：Uncheck checkbox by clicking directly on the other no-checked "input checkbow"

Answer 1

https://jsfiddle.net/m059rr88/

HTML

<input id="one" type="checkbox"></input>
<input id="two" type="checkbox"></input>

Javascript：

let afterFirstClick = false;

$("input").click(function(){
        let passiveCheckboxId = "one";
        if($(this).attr("id") === "one"){
          passiveCheckboxId = "two"
    }
    if(afterFirstClick){
          $("input#" + passiveCheckboxId).prop("checked", !$("input#" + passiveCheckboxId).prop("checked"));
    }
    afterFirstClick = true;
});

Answer 2

比你想象的要容易：

$('input.game').click(function(){
        $('input.game').not(this).removeAttr('checked');
    });

所做的是为复选框分配一个单击处理程序，以从所有其他框中删除选中的属性。当前框的状态由原生的复选框代码处理，所以勾选和取消勾选都会正常工作。

...或...

$('input.game').click(function(){
        if (this.checked) {
            $('input.game').not(this).removeAttr('checked');
        } else {
            $('input.game').not(this).trigger('click');
        }
    });

此代码将允许您通过单击任一复选框来交换复选框。一旦选中了一个框，就无法取消选中它，就像单选按钮一样。