JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='test'>
    <div ng-controller='ctrl'>
        <div>
            <input type="checkbox" ng-model="checkVal1"> check1
            <input type="checkbox" ng-model="checkVal2"> check2
        </div>
        <br />
        <div>
            <input type="checkbox" ng-model="val1"> c1
            <input type="checkbox" ng-model="val2"> c2
            <input type="checkbox" ng-model="val3"> c3
            <input type="checkbox" ng-model="val4"> c4
        </div>
    </div>
</div>

JavaScript

/*
Make a group of checkboxes can be selected only one at a time like radio buttons, but also can be selected none. 
Radio buttons were designed to must select at least one. But in some circumstances, you may want to select none of the choices.
This gist uses Angular to control the checkbox values.
*/

angular.module('test', []).controller('ctrl',['$scope', function ($scope) {
    
  var checkbox2radio = function (checkboxValueArray){
    for(var i=0; i<checkboxValueArray.length; i++)(function(n){
    	$scope.$watch(checkboxValueArray[n], function(newValue){
    		if(newValue){
    			for(var j=0; j<checkboxValueArray.length; j++){
    				if (n!=j){
    					$scope[checkboxValueArray[j]] = false;
    				}
    			};
    		}
    	});
    })(i);
  };
  
  checkbox2radio(['checkVal1', 'checkVal2']);
  checkbox2radio(['val1', 'val2', 'val3', 'val4']);
}]);