javascript - icheck.js radio button automatically gets checked when tabbing (32) through form

Question

I am using icheck http://icheck.fronteed.com/ to have fancy radio buttons and check boxes. I am running into an issue though. When I am tabbing through my form and tabbing past the radio button it automatically checks one of the radio buttons.

http://jsfiddle.net/75qmj037/7/

This is an example just tab through the form and see how it automatically checks the radio button. Does anyone know how I can change icheck.js so that this does not happen? I am trying to still be able to tab through the radio buttons but not have it automatically check the first one. I want them to have the same effect as the hover appearance when you tab through just have a ring incase you want to chose them with the spacebar

I have seen other forums saying this is an issue that is being looked into but this is from a few years ago and cannot find a resolution.

Any help with this would be greatly appreciated!

<fieldset class="radio-strip">
    <label class="checked">
      <input name="amt" value="10" type="radio">
      <span class="label-text">$<strong>10</strong></span>
    </label>
    <label>
      <input name="amt" value="25" type="radio">
      <span class="label-text">$<strong>25</strong></span>
    </label>
    <label>
      <input name="amt" value="50" type="radio">
      <span class="label-text">$<strong>50</strong></span>
    </label>
    <label>
      <input name="amt" value="100" type="radio">
      <span class="label-text">$<strong>100</strong></span>
    </label>
  </fieldset>
</body>

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});

But, there is a problem. How do you distinguish on which radio button are you?

Answer 1

You can style radio input elements without the need to jQuery or any plugins.

I removed table structure as it was unnecessary HTML and replaced it with div elements.

See this example (Updated Code):

body {
  background-color: white;
  margin: 0;
  padding: 0;
}
input[type='radio'] {
  display: none;
}
.radio {
  border: 1px solid #b3b4b4;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  float: left;
  height: 16px;
  margin: 10px 10px 0 0;
  padding: 10px;
  position: relative;
  width: 16px;
}
.row:hover .radio {
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
  background-color: #218996;
  border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
  content: "? ";
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size:
}
.row {
  border-bottom: 1px solid #dcdcdc;
  padding: 0 5px;
}
.row label {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.row > label:last-child {
  padding: 12px 0;
  width: calc(100% - 50px);
  cursor: pointer;
}

<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
  <div>
    <!---Label is here for placement of error message--->
    <label for="rgroup" class="error" style="display:none;">Please choose one.</label>
  </div>

  <div class='row'>
    <input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
    <label for="one" class='radio' tabindex='1'></label>
    <label for="one">MOTOR VEHICLE / TRAVEL TRAILER TITLE</label>
  </div>

  <div class='row'>
    <input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
    <label for="two" class='radio' tabindex='1'></label>
    <label for="two">MOBILE HOME</label>
  </div>

  <div class='row'>
    <input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
    <label for="three" class='radio' tabindex='1'></label>
    <label for="three">VESSEL</label>
  </div>

  <div class='row'>
    <input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
    <label for="four" class='radio' tabindex='1'></label>
    <label for="four">DUPLICATE</label>
  </div>

  <div>
    <button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
  </div>