Bootstrap - 使用兄弟姐妹（2）执行2个按钮的互斥复选框

Question

我试图让2个按钮组与复选框互斥。

以下是此jsfiddle

的结果

如您所见，有4个div（id="UserVsComputer"，id="User1VsUser2"，id="PlayableHits"和id="button-new-game"）。

我希望当我们点击关于<div>的复选框（即对应于右侧UserVsComputer时，前两个User1VsUser2（<input>和<div>）互斥{1}}）。

在Javascript部分，我做了：

// Select the clicked checkbox for game type                                          
   $('input.game').on('click',function(){                                                
     setGameType();
   }); 

   function setGameType() {
   // Get state of the first clicked element 
   var element = $('#UserVsComputer input.game');
   var checkBoxState = element.prop('checked');
   // Set !checkBoxState for the sibling checkbox, i.e the other
   element.siblings().find('input.game').prop('checked',!checkBoxState);
   updateGameType();
   }

   function updateGameType() {
   // Set type of game
   if ($('#UserVsComputer input').prop('checked'))
     gameType = 'UserVsComputer';
   else
     gameType = 'User1VsUser2';
   }

我不希望<div id="PlayableHits" class="checkbox">关注2个第一个复选框上的这种互斥。

例如，在捕获下方显示我可以将第一个复选框设置为true而不将它们设为独占：

我不知道我的错误在哪里，所以如果有人能看到什么错误......

由于

Answer 1

尝试以下操作 - 它使用click事件的目标来确定选中了哪个复选框：

// Select the clicked checkbox for game type
$('input.game').on('click',function(e){
  setGameType(e.target);
});

function setGameType(cb) {
  var container = $(cb).parent().parent();
  var checkBox = $(cb);
  var checkBoxState = checkBox.prop('checked');

  // Set !checkBoxState for the sibling checkbox, i.e the other
  container.siblings().find('input.game').prop('checked', !checkBoxState);
  updateGameType();
}

function updateGameType() {
  // Set type of game
  if ($('#UserVsComputer input').prop('checked')) {
    gameType = 'UserVsComputer';
  } else {
    gameType = 'User1VsUser2';
  }
}

还有其他一些可以引起注意的部分（硬编码的.parent().parent()并不漂亮但在这种情况下有效..