Jquery 正确切换类

我试图建立一个小网站，显示失败。以下是一个JSFIDLE示例：

单击复选框时，表示该计算机出现故障。在本例中，计算机A导致B、C和D发生故障，而其余计算机仅自行发生故障。目前，我正在切换类以显示失败。不幸的是，这种方法存在一些问题。特别是，当我单击复选框A时，它显示B、C和D已失败。但如果我点击复选框B，当复选框A被选中时，它会将B切换回绿色。这是不正确的，因为无论是否检查，计算机a的故障都会使B保持红色。同时，如果未选中A，则B应仅在未选中时恢复为绿色

实现这一目标的最佳方式是什么

以下是我目前拥有的脚本：

$('#computerA').click(function(){
    $('#computerA2').toggleClass('green failure');
    $('#computerB2').toggleClass('green failure');
    $('#computerC2').toggleClass('green failure');
    $('#computerD2').toggleClass('green failure');
})

$('#computerB').click(function(){
    $('#computerB2').toggleClass('green failure');

})

$('#computerC').click(function(){
    $('#computerC2').toggleClass('green failure');

})

$('#computerD').click(function(){
    $('#computerD2').toggleClass('green failure');

如果这有点让人困惑，我很抱歉。提前感谢您的帮助

试试看

$('#computerA').click(function(){
    var state = this.checked;
    $('#computerA2, #computerB2, #computerC2, #computerD2').toggleClass('green', !state).toggleClass('failure', state);
})

$('#computerB, #computerC, #computerD').click(function(){
    var state = this.checked || $('#computerA').is(':checked');
    $(this).prev().toggleClass('green', !state).toggleClass('failure', state);
})

演示：

---

检查计算机A是否没有fail类，如果没有，则执行toggle，否则不执行任何操作。

可能只需在其他项目的单击处理程序中添加此行：

          $('#computerB').click(function(){
              validateComputerA($('#computerB2'))

并添加函数来处理这一切，然后调用它并传入特定的计算机

   function validateComputerA($comp){
      if(!$('#computerA2').hasClass('failure')){
         $comp.toggleClass('green failure');
       }
   }

---

我希望最好的方法是当你点击一个按钮时，所有其他复选框都应该被禁用。就这么简单……这很有效，但现在我遇到了另一个问题。我在这里更新了小提琴：。当我点击A和B，然后取消选中B，它显示A和C是绿色的-当C仍然应该是一个失败。如果您对如何解决此问题有任何建议，那就太好了-谢谢@user2155400-为什么要在Arun创建的fiddle中添加更多代码？他没有表现出你所指的问题。我希望能够做和他一样的事情，并将其应用到其他的checks@user2155400-但你提到的案例与他的答案很吻合。

   function validateComputerA($comp){
      if(!$('#computerA2').hasClass('failure')){
         $comp.toggleClass('green failure');
       }
   }