Knockout radio buttons

when radio buttons have the same name...

by zachpainter77

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
 <div>
 
 
 <h1 style="color:green">
 These two groups have the same name attribute
 </h1>

                <div style="margin-top: 10px;">
                    <label class="title">A Good Faith Effort has been made to meet the DBE Commitment</label>
                    <label style="margin-left: 10px;">Yes
                        <input type="radio" name="GFEHasBeenMade" data-bind="checked:checkedValue1, checkedValue:1" style="margin-left: 0;"/>
                    </label> 
                    <label style="margin-left: 5px;">No
                        <input type="radio" name="GFEHasBeenMade" data-bind="checked:checkedValue1, checkedValue:0" style="margin-left: 0;"/>
                    </label>
                    <label style="margin-left: 5px;">Not Determined
                       
                        <input type="radio" name="GFEHasBeenMade" data-bind="checked:checkedValue1, checkedValue:-1" style="margin-left: 0a;"/>
                    </label>
                </div>

               
<input type="button" data-bind="click:toggleVis(1), value: (isVisible1() ? 'hide': 'show') + ' goal group'" value=""/>
                <div style="margin-top: 10px;" data-bind="visible:isVisible1" >
                    <label class="title">A Good Faith Effort has been made to meet the DBE Goal</label>
                    <label style="margin-left: 10px;">Yes
                        <input type="radio" name="GFEHasBeenMade" data-bind="checked:checkedValue1, checkedValue:1" style="margin-left: 0;"/>
                    </label> 
                    <label style="margin-left: 5px;">No
                        <input type="radio" name="GFEHasBeenMade" data-bind="checked:checkedValue1, checkedValue:0" style="margin-left: 0;"/>
                    </label>
                    <label style="margin-left: 5px;">Not Determined
                       
                        <input...

JavaScript

var Model = function(){
	self.isVisible1 = ko.observable(false);
  self.isVisible2 = ko.observable(false);
  self.isVisible3 = ko.observable(false);   
	self.checkedValue1 = ko.observable();
  self.checkedValue2 = ko.observable();
  self.checkedValue3 = ko.observable();
  self.checkedValue4 = ko.observable();
  self.toggleVis = function(a){
   if(a == 1){
   self.isVisible1(!self.isVisible1());
   }
   else if(a == 2){
   self.isVisible2(!self.isVisible2());
   }
   else{
   self.isVisible3(!self.isVisible3());
   }
  };
}


	var m = new Model();
  ko.applyBindings(m);