How do I get a custom radio button to check?

Question

I am creating a custom form but have hit a snag: The Radio buttons; when you click on them in the unchecked status the do not check. They will check if click the associated Div and the will also uncheck when checked. I have tried to extend the JS to the Label and It still does not work. And so...

How do I get a custom radio button to check and/or what do i need to do to get this to function?

Here is the relevant Code:

 function check(checkbox) {
   if (document.getElementById(checkbox).checked == false) {
     document.getElementById(checkbox).checked = true;
   } else {
     document.getElementById(checkbox).checked = false;
   }
 }

 .title {
   display: inline;
   position: relative;
   top: 2px;
   font-family: "Arial";
   color: #fff;
   font-size: 18px;
   padding: 0px;
   margin: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   border-collapse: collapse;
   font-stretch: ultra-condensed;
 }
 input[type="radio"] {
   display: none;
 }
 [type="radio"] + label {
   width: 10px;
   height: 10px;
 }
 [type="radio"] + label {
   background-color: #A3D5FF;
   border: 1px solid #A3D5FF;
   padding: 9px;
   border-radius: 20px;
   display: inline-block;
   position: relative;
   margin-right: 30px;
 }
 [type="radio"]:checked + label {
   background-color: #0088A8;
   ;
   border: 3px solid #fff;
   height: 5.75px;
   width: 5.75px;
   color: #243441;
 }
 input[type="radio"] + label {
   cursor: pointer;
   font-size: 1em;
   float: right;
   position: relative;
   right: -27px;
 }
 .chk {
   background: #009FC2;
   width: 265px;
   height: 30px;
   margin: 5px;
   padding: 5px;
   border-radius: 5px;
 }
 .chk:hover {
   background: #0088A8;
 }
HTML

<div class="chk" onClick="check('f-unlimited')">
  <h3 class="title">
                Unlimited  
              </h3>
  <input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
  <label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
  <h3 class="title">
                Expanded Format  
              </h3>
  <input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
  <label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
  <h3 class="title">
                Standard Legal  
              </h3>
  <input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
  <label for="f-standardLegal"></label>
</div>
</div>

Additional note: I am running almost identical code for my checkboxes and they are working perfectly.

Answer 1

noted, previous answer was in jquery, please see below for vanilla

javascript :

function checkboxClicked() {
    event.stopPropagation();
    event.preventDefault();
}
function check(checkbox) { 
    if (document.getElementById(checkbox).checked == false) {
      document.getElementById(checkbox).checked = true;
    } else {
      document.getElementById(checkbox).checked = false;
    } 
  }

html :

    <div class="chk" onClick="check('f-unlimited')">
      <h3 class="title">
                    Unlimited  
                  </h3>
      <input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
      <label for="f-unlimited"></label>
    </div>

    <div class="chk" onClick="check('f-expandedFormat')">
      <h3 class="title">
                    Expanded Format  
                  </h3>
      <input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
      <label for="f-expandedFormat"></label>
    </div>

    <div class="chk" onClick="check('f-standardLegal')">
      <h3 class="title">
                    Standard Legal  
                  </h3>
      <input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
      <label for="f-standardLegal"></label>
    </div>

Answer 2

The problem is in your check function. When you click on the div it fires to reverse the check state. When you click the check itself, the check state is reversed, then the check function runs and reverses the state again. You need to cancel event propagation when the check itself is clicked.