{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Melony? 的问题《icheck.js radio button automatically gets checked》','https://www.manongdao.com/q-1125835.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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):
This will solve the issue but you have to add tabindex to each element (it could be the same value for all).
From MDN:
So, you may set the tabindex to -1 for your radio buttons:
The snippet: