jquery - 使用 CSS 设置单选按钮样式并使用图像

Question

是否有一种仅使用 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);
 });

目前，我得到的是图像而不是 radio 元素符号，但似乎没有记录点击，因为我在点击后没有得到我需要的文本。

有人可以帮帮我吗？

Answer 1

最佳实践是像这样简单地使用标签元素:

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

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

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

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

因此，用户将单击标签，此时屏幕外的单选按钮将被选中。