javascript checkbox/uncheckbox multiple items in same div

Question

If I have options with checkboxes like this, imag1

I need to know if there is any way in javascript which allows me to do: If I check traumatic, then check non traumatic, then traumatic should be unchecked automatically. Same with the next 2 options. If I check acute, then check chronic automatically, then acute should be unchecked.I should be able to select 2 options also from them- like acute and traumatic or chronic and non-traumatic and so on. All these options are present in the same input id and div. The code to display them is something like this:

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];
                    }
                }
}
}

The 7th line(final_comorbi) displays the first level term, in this example Subdural. The 14th line final_comorb[i][j][k] displays these above mentioned options. How do I do this? Thanks in advance.

Answer 1

If you have to keep checkboxes, see if this fiddle can help.

$(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);
          }
        });
      }
    });
  });
});