javascript复选框/取消选中同一div中的多个项目

Question

如果我有像这样带有复选框的选项， imag1

我需要知道在 javascript 中是否有任何方法允许我这样做: 如果我检查外伤，然后检查非外伤，那么应自动取消检查外伤。与接下来的 2 个选项相同。如果我选中急性，然后自动选中慢性，那么应该取消选中急性。我应该也可以从中选择 2 个选项——比如急性和创伤性或慢性和非创伤性等等。所有这些选项都存在于相同的输入 id 和 div 中。显示它们的代码是这样的:

if(final_comorb != null && final_comorb.length != 0) {
            for(var i=0; i<final_comorb.length; i++) {
                tableBody += "<tr><td><table>"
                          + "<tr onmouseover=\"mouseOverPara('rrSentencesImg"+index+impression_prefix+i+"','rrSentencesCol"+index+impression_prefix+i+"');\" onmouseout=\"mouseOutPara('rrSentencesImg"+index+impression_prefix+i+"','rrSentencesCol"+index+impression_prefix+i+"');\">"
                          + "<td><div id='rrSentencesCol"+index+impression_prefix+i+"'>"
                          + "<a onmouseover=\"makeDivVisibleRR('rrSentences"+index+impression_prefix+i+"');\" onmouseout=\"makeDivHiddenRR('rrSentences"+index+impression_prefix+i+"');\">"
                          + "<b><font color='#0000FF'><input class='rrPart' id='rrGroup"+index+impression_prefix+i+"' type='checkbox' value='GROUP' onclick='javascript:otherForm(\"rrChkGrp"+index+impression_prefix+i+"\",\"rrGroup"+index+impression_prefix+i+"\");'>"+final_comorb[i][1]
                          + "</font></b></a></div>";

                tableBody += "<div id='rrChkGrp"+index+impression_prefix+i+"' style='display: none; margin-left: 60px;'>";

                for(var j=2; j<final_comorb[i].length; j++) {
                    for(var k=0;k<final_comorb[i][j].length;k++){
                    tableBody += "<br><input class='rrPart"+index+impression_prefix+i+"' id='rrGrp"+index+impression_prefix+i+"Chk"+j+"' type='checkbox'>"+final_comorb[i][j][k];
                    }
                }
}
}

第 7 行(final_comorb i)显示第一层术语，在本例中为 Subdural。第 14 行 final_comorb[i][j][k] 显示了上述这些选项。我该怎么做呢？提前致谢。

Answer 1

如果必须保留复选框，请查看 this fiddle 可以提供帮助。

$(function(){
  var checkboxBinding = {};
  $('[data-binding]').each(function(){
    var $this = $(this);
    var bindingName = $this.data('binding');
    if(checkboxBinding[bindingName] === undefined){
      checkboxBinding[bindingName] = [];
    }
    checkboxBinding[bindingName].push($this);
    $this.on('change', function(){
      if($this.is(':checked')){
        var bindingsArr = checkboxBinding[bindingName];
        bindingsArr.forEach(function(checkboxItem){
          if(checkboxItem !== $this){
            $(checkboxItem).prop('checked', false);
          }
        });
      }
    });
  });
});