2

是否有一种简单的方法来设置仅使用 CSS 的单选按钮样式，所以我单击图像而不是项目符号？例如，喜欢竖起大拇指/竖起大拇指。

我有两个单选按钮，我需要注册点击了哪一个。当您按下按钮时，单选按钮会变得可见，当您单击单选按钮时，文本会替换单选按钮。

按钮 > 单选按钮 > 文本

这是我已经走了多远：

HTML

<div id="txtradiocall_lille" style="display:none;">
              <input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
              Yes
              <input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
              No
            </div>

CSS

.txtradiocall_lille input[type='radio']
{
    display:inline;
}

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#txtradiocall_lille label {
    display: inline-block;
    cursor: pointer;
}

#txtradiocall_lille label:hover {
    background-color: #efefef;
}

#txtradiocall_lille label img {
    padding: 3px;

}

无线电点击处理程序

 $("input[type='radio']").change(function () {
 var selection = $(this).val();
  getcallaskok(selection, talok);
 });

目前，我得到的是图像而不是无线电子弹，但似乎点击没有注册，因为点击后我没有得到我需要的文本。

有人能帮助我吗？

4

2 回答 2

3

最佳做法是像这样简单地使用标签元素：

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

然后你使用 css 来设置标签的样式。在您的情况下，可能会将您的图像添加为背景。

然后，您只需通过使用绝对定位将其移出屏幕来隐藏实际的单选按钮。注意不要使用 display:none 或 visibility:hidden 隐藏单选按钮，因为这不利于可访问性。

因此，用户将单击标签，然后将选择现在不在屏幕上的单选按钮。

于 2013-04-24T10:45:43.560 回答
0

我认为像你一样隐藏单选按钮并使用标签就足够了。但可能需要一些修正。标签中的“for”属性指向 id，而不是您现在正在执行的值。并使用名称对单选按钮进行分组，而不是像您现在所做的那样使用 id。

于 2013-04-24T10:46:38.360 回答