8

我希望一个特定的表单组件充当单选按钮（一次只能选择一个选项）。但是，我不希望无线电子弹显示选择其他呈现方法，例如选择高光或其他方法。这将允许优雅降级：如果用户浏览器不支持 Javascript，它只会降级为基本单选按钮。我希望通过 Javascript 或 CSS 隐藏项目符号按钮。有谁知道怎么做？谢谢。

4

8 回答 8

5

只需隐藏单选按钮（当然不会失去可访问性）就可以使用以下 CSS 完成：

input[type="radio"] {
    left: -999em;
    position: absolute;
}

使用opacity: 0;并不理想，因为按钮仍然存在，占用了页面空间。将其放置在视线之外是要走的路。

于 2013-04-02T15:05:27.177 回答
4

我有一个简单的解决方案，我的单选按钮周围有一个标签，上面有一个代表被选中的东西的图像：

<label>
    <input type="radio" name="foo">
    <img src="...">
</label>

然后我应用了以下样式：

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

本质上label，每个都变成了一个完全由img. 收音机本身是使用隐藏的opacity:0。用户可以告诉被选中的img收音机旁边的选择是不透明的，而其他的是半透明的。你可以很容易地做各种其他类型的效果。

我喜欢的是表单仍然易于处理，它只是一组单选按钮。

我对单选按钮使用了不透明度，而不是display:none它们visibility:hidden仍然在 tabindex 中，并且表单仍然可以通过键盘访问。

于 2012-12-05T02:45:28.417 回答
2 
$('#js input[type=radio]').hide();
于 2011-03-02T05:32:45.813 回答
2

如果我理解正确，您需要单选按钮，但您不希望按钮本身出现。请记住，仅删除按钮不会提供您正在寻找的用户体验。你需要有某种形式的用户反馈。

你有两个选择：

1）使用javascript / jquery对此进行编程。考虑到这一点，我建议您使用单选按钮作为起始占位符，然后使用 javascript（最好通过 jquery 插件）重新绘制页面并将按钮替换为可点击的 div 和动态更改的隐藏字段值。

2) 使用:checked 的 CSS 元类，不幸的是它似乎没有跨浏览器支持。

于 2011-03-02T05:34:13.910 回答
1 
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';
    }

}

或者，如果您的浏览器支持 ( querySelectorAll in document)...

document.querySelectorAll('#my-form input[type="radio"]').style.display = 'none';
于 2011-03-02T05:33:09.833 回答
1

我不认为你可以用css隐藏它。您必须隐藏单选按钮，然后用 JS 替换功能。也许一个可选择的 LI 列表对你有用。

从 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}
    });
});
于 2011-03-02T05:36:46.570 回答
-1

你可以通过添加这个 style="list-style:none;"

于 2011-03-02T05:31:23.213 回答
-1

只需插入： style="display:none;" 在每个"<input type='radio'…&gt;"标签内。

这使项目符号不可见，但使标签显示。

于 2013-04-19T21:52:54.803 回答