javascript HTML 单选按钮：隐藏项目符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5163748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML radio buttons: hide bullets
提问by whamsicore
I want a particular form component to act as radio buttons (only one option may be selected at a time). I do not want the radio bullets to show, however, opting for alternative presentational methods such as high light selected, or some other method. This will allow for graceful degradation: if the user browser does not support Javascript it will just degrade to basic radio buttons. I am wish to hide the bullet buttons through Javascript or CSS. Anyone know how? thanks.
我想要一个特定的表单组件作为单选按钮（一次只能选择一个选项）。但是，我不希望无线电子弹显示，而是选择其他展示方法，例如选择高光或其他一些方法。这将允许优雅降级：如果用户浏览器不支持 Javascript，它将降级为基本的单选按钮。我希望通过 Javascript 或 CSS 隐藏项目符号按钮。有谁知道怎么做？谢谢。
采纳答案by slifty
If I understand this correctly, you want radio buttons but you don't want the buttons themselves to appear. Keep in mind that just removing the buttons will NOT provide the user experience you are looking for. You need to have some form of user feedback.
如果我理解正确，您需要单选按钮但不希望按钮本身出现。请记住，仅删除按钮不会提供您正在寻找的用户体验。您需要获得某种形式的用户反馈。
You have two options:
您有两个选择：
1) Program this using javascript / jquery. With that in mind I would suggest you use radio buttons as a starting placeholder, and then use javascript (ideally via a jquery plugin) which will redraw the page and replace the buttons with clickable divs and a dynamically changing hidden field value.
1) 使用 javascript/jquery 进行编程。考虑到这一点，我建议您使用单选按钮作为起始占位符，然后使用 javascript（最好通过 jquery 插件），它将重绘页面并用可点击的 div 和动态更改的隐藏字段值替换按钮。
2) Use the CSS meta class of :checkedwhich unfortunately doesn't appear to have cross browser support.
2) 使用CSS 元类 :checked不幸的是它似乎没有跨浏览器支持。
回答by aross
Just the bit of hiding the radio buttons (without losing accessibility, of course) can be done with the following CSS:
只需隐藏单选按钮（当然不会失去可访问性）可以使用以下 CSS 完成：
input[type="radio"] {
left: -999em;
position: absolute;
}
Using opacity: 0;isn't ideal, as the button is still there, taking up space in the page. Positioning it out of view is the way to go.
使用opacity: 0;并不理想，因为按钮仍然存在，占用页面空间。将它放置在视野之外是要走的路。
回答by Rob Fletcher
I've got a simple solution working where I have a label surrounding my radio buttons with an image representing the thing being selected:
我有一个简单的解决方案，我在我的单选按钮周围有一个标签，其中有一个代表被选择事物的图像：
<label>
<input type="radio" name="foo">
<img src="...">
</label>
I have then applied the following styles:
然后我应用了以下样式：
label {
float: left;
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
}
label input[type=radio] {
opacity: 0;
}
label img {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
}
:checked + img {
opacity: 1;
}
Essentially each labelbecomes a regular sized box that is completely filled by an img. The radio itself is hidden using opacity:0. The user can tell what is selected as the imgnext to the checked radio will be opaque whereas the others are semi-transparent. You could do various other kind of effects pretty easily.
本质上，每个都label变成了一个普通大小的盒子，完全由img. 收音机本身使用 隐藏opacity:0。用户可以判断img选中的收音机旁边的内容是不透明的，而其他的是半透明的。你可以很容易地做各种其他类型的效果。
The thing I like is that the form remains simple to process, it isjust a group of radio buttons.
事情我喜欢的是窗体保持简单的过程，它是只是一组单选按钮。
I used opacity for the radio buttons rather than display:noneor visibility:hiddenas then they are still in the tabindex and the form remains keyboard accessible.
我对单选按钮使用了不透明度，而不是display:none或 ，visibility:hidden因为它们仍然在 tabindex 中，并且表单仍然可以通过键盘访问。
回答by Orbit
$('#js input[type=radio]').hide();
回答by alex
var inputs = document.getElementById('my-form').getElementsByTagName('input');
for (var i = 0, inputsLength = inputs.length;i < inputsLength; i++) {
var input = inputs[i];
if (input.getAttribute('type') == 'radio') {
input.style.display = 'none';
}
}
Alternatively, if your browser supports it (querySelectorAll in document)...
或者，如果您的浏览器支持它 ( querySelectorAll in document)...
document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';
回答by JohnP
I don't think you can hide it with css. You'd have to hide the radiobuttons and then replace the functionality with JS. maybe a selectable list of LIs would work for you.
我认为你不能用 css 隐藏它。您必须隐藏单选按钮，然后用 JS 替换该功能。也许一个可选择的 LI 列表对您有用。
From the jQuery UI Selectable : http://jqueryui.com/demos/selectable/
从 jQuery UI 可选：http: //jqueryui.com/demos/selectable/
<input type='radio' value='1' name='rad' class='radio'>
<input type='radio' value='2' name='rad' class='radio'>
<input type='radio' value='3' name='rad' class='radio'>
<ol id="selectable" style='display:none'>
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
</ol>
$(function() {
$('.radio').hide();
$( "#selectable" ).show().selectable({
selected: function(event, ui) {//figure out which was selected and mark the hidden radio button}
});
});
回答by Mark Choi
Just insert:
style="display:none;"inside every "<input type='radio'…>"tag.
只需插入：
style="display:none;"在每个"<input type='radio'…>"标签内。
This makes the bullets invisible, but leaves the labels showing.
这会使子弹不可见，但会显示标签。
回答by Steven Hammons
you can do it by adding this style="list-style:none;"
你可以通过添加这个 style="list-style:none;"
