javascript - 当通过表单按 Tab 键 (32) 时，icheck.js 单选按钮会自动被选中

Question

我正在使用 icheck http://icheck.fronteed.com/有精美的单选按钮和复选框。不过我遇到了一个问题。当我通过 Tab 键浏览表单并通过单选按钮时，它会自动检查其中一个单选按钮。

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

这是一个示例，只需按 Tab 键浏览表单并查看它如何自动检查单选按钮。有谁知道我如何更改 icheck.js 以免发生这种情况？ 我试图仍然能够浏览单选按钮，但不能让它自动检查第一个按钮。我希望它们在您通过 Tab 键浏览时具有与悬停外观相同的效果，只是有一个圆环，以防您想用空格键选择它们

我看到其他论坛说这是一个正在研究的问题，但这是几年前的问题，无法找到解决方案。

任何有关此问题的帮助将不胜感激!

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

但是，有一个问题。你如何区分你在哪个单选按钮上？

Answer 1

您可以设置 radio 输入元素的样式，而无需 jQuery 或任何插件。

我删除了表格结构，因为它是不必要的 HTML，并将其替换为 div 元素。

查看此示例(更新的代码):

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>

这将解决问题，但您必须向每个元素添加 tabindex(所有元素的值可能相同)。