当通过窗体切换（32）时，icheck.js单选按钮自动被检查 [英] icheck.js radio button automatically gets checked when tabbing (32) through form

问题描述

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

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

这是一个仅通过表单标签的示例，并查看它如何自动检查单选按钮。有谁知道我可以如何改变icheck.js，这样不会发生？ 我试图仍然能够通过单选按钮选项卡，但没有自动检查第一个。我希望它们与悬停外观具有相同的效果，当您选中时只需要一个戒指就可以将它们与空格键一起使用

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

任何帮助，这将不胜感激！

 < fieldset class =radio-strip> 
< label class =checked> 
< input name =amtvalue =10type =radio> 
< span class =label-text> $< strong> 10< / strong>< / span> 
< / label> 
< label> 
< input name =amtvalue =25type =radio> 
< span class =label-text> $< strong> 25< / strong>< / span> 
< / label> 
< label> 
< input name =amtvalue =50type =radio> 
< span class =label-text> $< strong> 50< / strong>< / span> 
< / label> 
< label> 
< input name =amtvalue =100type =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 ％'//可选
}）; 
  

但是，有一个问题。你怎么区分你是哪个单选按钮？

解决方案

你可以设置无线电输入元素而不需要jQuery或任何插件。

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

查看这个例子（更新后的代码）：

body {background {background-code-css lang-css prettyprint-override} -白颜色;保证金：0; padding：0;} input [type ='radio'] {display：none;}。radio {border：1px solid＃b3b4b4;边界半径：50％;盒子尺寸：边框;光标：指针;显示：块;向左飘浮; height：16px; margin：10px 10px 0 0;填充：10px;位置：相对; 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：✓;位置：绝对;白颜色;剩下：50％;顶部：50％;变换：翻译（-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;宽度：calc（100％ - 50px）; cursor：pointer;}

< form name =titleTypes id =titleTypesmethod =postaction =process.cfm> < DIV> <！---标签用于放置错误信息---> < label for =rgroupclass =errorstyle =display：none;>请选择其一。< / label> < / DIV> < div class ='row'> < input id =onetype =radioname =rgroupvalue =MV / titleTypeMV.cfm/> < label for =oneclass ='radio'tabindex ='1'>< / label> < label for =one> MOTOR VEHICLE / TRAVEL TRAILER TITLE< / label> < / DIV> < div class ='row'> < input id =twotype =radioname =rgroupvalue =MH / mobileHome.cfm/> < label for =twoclass ='radio'tabindex ='1'>< / label> < label for =two> MOBILE HOME< / label> < / DIV> < div class ='row'> < input id =threetype =radioname =rgroupvalue =BOAT / boat.cfm/> < label for =threeclass ='radio'tabindex ='1'>< / label> < label for =three> VESSEL< / label> < / DIV> < div class ='row'> < input id =fourtype =radioname =rgroupvalue =DUPL / duplicate.cfm/> < label for =fourclass ='radio'tabindex ='1'>< / label> < label for =four> DUPLICATE< / label> < / DIV> < DIV> < button class =btn -utype =submitname =submitid =submitBtnclass =submitBtn>< i>< / i>下一步< / button> < / div>

将tabindex添加到每个元素（它可以是所有的相同值）。

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?

解决方案

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>

This will solve the issue but you have to add tabindex to each element (it could be the same value for all).

这篇关于当通过窗体切换（32）时，icheck.js单选按钮自动被检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！